基本路由

路由器允许基于用户与应用程序的交互从一个视图导航到另一个视图。

以下是在 Angular 中实现基本路由的步骤 -

注意 ：确保你有此标记：

<base href='/'> 

作为 index.html 文件中头标记下的第一个子项。此元素表明你的 app 文件夹是应用程序根目录。然后 Angular 将知道如何组织你的链接。

1. 检查你是否指向 package.json 中的正确/最新路由依赖项（使用最新版本的 Angular）并且你已经执行了 npm install -

   "dependencies": {
       "@angular/router": "^4.2.5"
   }
   

2. 根据接口定义定义路由：

   interface Route {
     path?: string;
     pathMatch?: string;
     component?: Type<any>;
   }
   

3. 在路由文件（routes/app.routing.ts）中，导入需要为不同路由路径配置的所有组件。空路径表示默认情况下加载视图。路径中的“：”表示传递给已加载组件的动态参数。

   import { Routes, RouterModule } from '@angular/router';
   import { ModuleWithProviders } from '@angular/core';
   import { BarDetailComponent } from '../components/bar-detail.component';
   import { DashboardComponent } from '../components/dashboard.component';
   import { LoginComponent } from '../components/login.component';
   import { SignupComponent } from '../components/signup.component';
   
   export const APP_ROUTES: Routes = [
       { path: '', pathMatch: 'full', redirectTo: 'login' },
       { path: 'dashboard', component: DashboardComponent },
       { path: 'bars/:id', component: BarDetailComponent },
       { path: 'login', component: LoginComponent },
       { path: 'signup',   component: SignupComponent }
   ];
   export const APP_ROUTING: ModuleWithProviders = RouterModule.forRoot(APP_ROUTES);
   

4. 在你的 app.module.ts 中，将它放在 @NgModule([]) 下的 @NgModule([]) 下：

   // Alternatively, just import 'APP_ROUTES
   import {APP_ROUTING} from '../routes/app.routing.ts';
   @NgModule([
       imports: [
           APP_ROUTING
           // Or RouterModule.forRoot(APP_ROUTES)
       ]
   ])
   

5. 根据访问的路径加载/显示路由器组件。<router-outlet>directive 用于指示角度加载组件的位置。

   import { Component } from '@angular/core';
   
   @Component({
       selector: 'demo-app',
       template: `
           <div>
               <router-outlet></router-outlet>
           </div>
       `
   })
   export class AppComponent {}
   

6. 链接其他路线。默认情况下，RouterOutlet 将加载 Routes 中指定了空路径的组件。RouterLink 指令与 html 锚标签一起使用，以加载附加到路由的组件。RouterLink 生成用于生成链接的 href 属性。例如：

   import { Component } from '@angular/core';
   
   @Component({
       selector: 'demo-app',
       template: `
           <a [routerLink]="['/login']">Login</a>
           <a [routerLink]="['/signup']">Signup</a>      
           <a [routerLink]="['/dashboard']">Dashboard</a>
           <div>
               <router-outlet></router-outlet>
           </div>
           `
   })
   export class AnotherComponent { }
   

现在，我们很好地路由到静态路径。RouterLink 通过传递额外的参数和路径来支持动态路径。

import { Component } from '@angular/core';

@Component({
  selector: 'demo-app',
  template: `
        <ul>
          <li *ngFor="let bar of bars | async">
            <a [routerLink]="['/bars', bar.id]">
              {{bar.name}}
            </a>
          </li>
        </ul>
    <div>
      <router-outlet></router-outlet>
    </div>
  `
})
export class SecondComponent { }

RouterLink 采用一个数组，其中第一个参数是路由路径，后续元素是动态路由参数。