Angular 4.x 路由

最新推荐文章于 2023-03-09 00:17:25 发布

iamwiam

最新推荐文章于 2023-03-09 00:17:25 发布

阅读量384

点赞数 1

分类专栏： Angular 文章标签： Angular 路由

本文链接：https://blog.csdn.net/u012495483/article/details/88408179

版权

一、基本概率操作
1.安装路由
首先第一件事，我们需要安装 Angular Router。

yarn add @angular/router
# OR
npm i --save @angular/router

以上命令执行后，将会自动下载 @angular/router 模块到 node_modules 文件夹中，如下所示。
在这里插入图片描述
2. 根路由
我们需要做的最后一件事，是将标签添加到我们的 index.html 文件中。路由需要根据这个来确定应用程序的根目录。

<!doctype html>
<html>
  <head>
    <base href="/">
    <title>Application</title>
  </head>
  <body>
    <app-root></app-root>
  </body>
</html>

使用路由

要使用路由，我们需要在 AppModule 模块中，导入 RouterModule 。具体如下：

 import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 import { RouterModule } from '@angular/router';
 import { AppComponent } from './app.component';
 @NgModule({
    imports: [
         BrowserModule,
         RouterModule
       ],
       bootstrap: [
         AppComponent
       ],
       declarations: [
         AppComponent
       ]
     })
     export class AppModule {}

此时我们的路由还不能正常工作，因为我们还未配置应用程序路由的相关信息。RouterModule 对象为我们提供了两个静态的方法：forRoot() 和 forChild() 来配置路由信息。
3.1 RouterModule.forRoot()
RouterModule.forRoot() 方法用于在主模块中定义主要的路由信息，通过调用该方法使得我们的主模块可以访问路由模块中定义的所有指令。

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


export const ROUTES: Routes = [];


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

3.2 RouterModule.forChild()
RouterModule.forChild() 与 Router.forRoot() 方法类似，但它只能应用在特性模块中。

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { Routes, RouterModule } from '@angular/router';


export const ROUTES: Routes = [];


@NgModule({
  imports: [
    CommonModule,
    RouterModule.forChild(ROUTES)
  ],
  // ...
})
export class ChildModule {}

这个功能非常强大，因为我们不必在一个地方（我们的主模块）定义所有路由信息。反之，我们可以在特性模块中定义模块特有的路由信息，并在必要的时候将它们导入我们主模块。友情提示：根模块中使用 forRoot()，子模块中使用 forChild()。
4.配置路由