angular-router

来源：互联网发布：c语言void和int 编辑：程序博客网时间：2024/06/05 01:06

base href：
- 大多数带路由的应用都要在index.html的标签下先添加一个元素，来告诉路由器该如何合成导航用的URL

<!doctype html><html lang="en"><head>  <meta charset="utf-8">  <title>MyProject</title>  <base href="/">  <meta name="viewport" content="width=device-width, initial-scale=1">  <link rel="icon" type="image/x-icon" href="favicon.ico"></head><body>  <app-root></app-root></body></html>

导入路由库
- Angular的路由器是一个可选的服务，它用来呈现指定的URL所对应的视图。它并不是Angular核心库的一部分，而是在它自己的@angular/router包中

import { RouterModule, Routes } from '@angular/router';

配置
- 每个带路由的Angular应用都有一个Router（路由器）服务的单例对象。当浏览器的URL变化时，路由器会查找对应的Route（路由），并据此决定该显示哪个组件。
- RouterModule.forRoot方法来配置路由器，并把它的返回值添加到AppModule的imports数组中。

const appRoutes: Routes = [    {        path: '',        redirectTo: 'app/myexample',        pathMatch: 'full'    },    {        path: 'router/example',        component: RouterExampleComponent    },    {         path: 'app/myexample',         component: ExampleComponent     }];// module@NgModule({  declarations: [   RouterExampleComponent,    ExampleComponent  ],  imports: [    RouterModule.forRoot(appRoutes)  ],

路由出口

<router-outlet></router-outlet>

路由链接
- RouterLink

<a routerLink="/app/myexample">Crisis Center</a>

路由状态
- 在导航时的每个生命周期成功完成时，路由器会构建出一个ActivatedRoute组成的树，它表示路由器的当前状态。我们可以在应用中的任何地方用Router服务及其routerState属性来访问当前的RouterState值。

阅读全文

0 0