Angular 4 路由

在 Angular 4 中，路由是管理不同视图之间导航的重要部分。通过路由，我们可以实现页面之间的切换，实现单页应用的效果。在本章节中，我们将深入讨论 Angular 4 中的路由相关内容。

路由基础

在 Angular 4 中，路由模块被单独提取出来，我们需要通过 @angular/router 模块来使用路由功能。首先，我们需要在 app.module.ts 中引入 RouterModule 模块，并在 imports 数组中加入 RouterModule.forRoot([])。

// www.javascriptcn.com code example
import { RouterModule } from '@angular/router';

@NgModule({
  imports: [
    RouterModule.forRoot([])
  ],
  ...
})
export class AppModule { }

路由配置

在 Angular 4 中，我们可以通过 RouterModule.forRoot([]) 中的数组来配置路由。每个路由都是一个对象，包含 path 和 component 属性，分别表示路由路径和对应的组件。

// www.javascriptcn.com code example
const routes: Routes = [
  { path: 'home', component: HomeComponent },
  { path: 'about', component: AboutComponent }
];

@NgModule({
  imports: [
    RouterModule.forRoot(routes)
  ],
  ...
})
export class AppModule { }

路由导航

在模板中，我们可以使用 routerLink 指令来实现路由导航。例如，我们可以在导航栏中添加链接：

<nav>
  <a routerLink="/home">Home</a>
  <a routerLink="/about">About</a>
</nav>

路由参数

在 Angular 4 中，我们可以通过路由参数来传递数据。在路由路径中使用冒号表示参数，然后在组件中通过 ActivatedRoute 服务来获取参数值。

// www.javascriptcn.com code example
const routes: Routes = [
  { path: 'user/:id', component: UserComponent }
];

@Component({
  ...
})
export class UserComponent {
  constructor(private route: ActivatedRoute) {
    this.route.params.subscribe(params => {
      console.log(params['id']);
    });
  }
}

嵌套路由

在 Angular 4 中，我们可以实现嵌套路由，即在一个组件中嵌套另一个组件的路由。通过在父路由中定义子路由，我们可以实现多层级路由。

// www.javascriptcn.com code example
const routes: Routes = [
  { 
    path: 'dashboard', 
    component: DashboardComponent,
    children: [
      { path: 'overview', component: OverviewComponent },
      { path: 'details', component: DetailsComponent }
    ]
  }
];

路由守卫

在 Angular 4 中，我们可以使用路由守卫来控制路由的访问权限。通过实现 CanActivate, CanDeactivate, CanLoad 等接口，我们可以在路由跳转前执行一些逻辑。

// www.javascriptcn.com code example
@Injectable()
export class AuthGuard implements CanActivate {
  canActivate(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
  ): Observable<boolean> | Promise<boolean> | boolean {
    if (isLoggedIn) {
      return true;
    } else {
      this.router.navigate(['/login']);
      return false;
    }
  }
}

以上就是关于 Angular 4 中路由的基础内容，希望对你有所帮助。在接下来的章节中，我们将继续深入探讨 Angular 4 的其他特性。