英雄编辑器(05)-添加路由出口

打开 AppComponent 的模板,把 <app-heroes> 元素替换为 <router-outlet> 元素。

<h1>{{title}}</h1>

<router-outlet></router-outlet>

<app-messages></app-messages>

AppComponent 的模板不再需要 <app-heroes>,因为只有当用户导航到这里时,才需要显示 HeroesComponent。

<router-outlet> 会告诉路由器要在哪里显示路由的视图。

能在 AppComponent 中使用 RouterOutlet,是因为 AppModule 导入了 AppRoutingModule,而 AppRoutingModule 中导出了 RouterModule。 在本教程开始时你运行的那个 ng generate 命令添加了这个导入,是因为 --module=app 标志。如果你手动创建 app-routing.module.ts 或使用了 CLI 之外的工具,你就要把 AppRoutingModule 导入到 app.module.ts 中,并且把它添加到 NgModule 的 imports 数组中。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章