angular6-Routing

1.使用angular CLI生成AppRoutingModule

ng generate module app-routing --flat --module=app

–flat将文件放在src / app而不是新建的文件夹中。
–module = app告诉CLI将其注册到AppModule的imports数组中。
生成的文件如下图所示：

import {
    NgModule } from '@angular/core';
import {
    CommonModule } from '@angular/common';

@NgModule({
   
  imports: [
    CommonModule
  ],
  declarations: []
})
export class AppRoutingModule {
    }

通常不在路由模块中声明组件，因此可以删除@ NgModule.declarations数组，并删除CommonModule引用。

2.导入RouterModule和Router

我们将在RouterModule中配置路由器的路由，因此从@ angular /路由器库中导入RouterModule和Router。
在@ NgModule中添加一个带有RouterModule的@ NgModule.exports数组。 导出RouterModule使路由器指令用于需要它们的AppModule组件。

代码如下：

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

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

@NgModule({
   
  imports: [],
  exports: [RouterModule]
})
export class AppRoutingModule {
    }

Angular Route有两个属性：

path：与浏览器地址栏中的URL匹配的字符串。
component：导航到此路由时路由器应创建的组件。
例如：当URL类似于localhost：4200 / hero时，页面就会导航到HeroComponent。

3.在@ NgModule.imports中配置路由

import {
    NgModu