angular-router

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

<html lang="en">
<head>
  <meta charset="utf-8">
  <title>MyProjecttitle>
  <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 Centera>
  • 路由状态
    • 在导航时的每个生命周期成功完成时,路由器会构建出一个ActivatedRoute组成的树,它表示路由器的当前状态。 我们可以在应用中的任何地方用Router服务及其routerState属性来访问当前的RouterState值。

你可能感兴趣的:(angularjs)