Angular 路由（routing）基本配置

本节我们学习路由知识点，假如我们有三个自定义组件，分别是【首页|home】，【设置|set】和【更多|more】，需要动态挂载在根组件【app.component.html】中，当浏览器url地址输入对应组件名称，动态显示该组件对应的内容，这就是动态路由；

• 使用 CLI 创建一个项目并配置默认路由：

ng new demo01 --routing

在新建的项目【demo01】的根组件上面就会多一个ts文件【app-routing.module.ts】

此时在【app.module.ts】文件中就会新增如下信息：

import { AppRoutingModule } from './app-routing.module';

//同时在imports中声明
imports: [ //此处是模块声明 
    BrowserModule,
    FormsModule,
    AppRoutingModule, /* Routing */
    HttpClientModule /* HttpClient */
],

同时在根组件的【app.component.html】文件中默认添加如下信息： 

<router-outlet></router-outl