角度路由 - 组件未显示答案

【问题标题】：Angular routing - component not showing up角度路由 - 组件未显示
【发布时间】：2019-10-07 10:12:03
【问题描述】：

我一直在尝试从我的主页路由来加载其他 HTML 组件，但它不起作用。当地址更改为我设置的地址时，主页一直显示 -

app.module.ts 如下：

@NgModule({
  declarations: [
    AppComponent,
    RegisterComponent,
    TabsComponent,
    AboutComponent,
    LessonsComponent
  ],
  imports: [
    RouterModule.forRoot([

      { path: 'tabs', component: TabsComponent},
      { path: 'register', component: RegisterComponent},
      { path: 'lessons',component: LessonsComponent},
      { path: 'about', component: AboutComponent},
      { path: 'app',component: AppComponent},
    ]),

这些是我在 app.component.html 中的链接：

<div>
    <ul class="navbar">
          <li><a routerLink="/register" routerLinkActive="active">Register</a></li>
          <li><a routerLink="/tabs" routerLinkActive="active">Tabs</a></li>
          <li><a routerLink="/app" routerLinkActive="active">Home</a></li>
          <li><a routerLink="/lessons" routerLinkActive="active">Lessons</a></li>
          <li style="float:right"><a routerLink="/about" routerLinkActive="active">About</a></li>
      </ul>
</div>

例如，如果我按下注册链接，我将到达“http://localhost:4200/register”，但它停留在 app.component.html

【问题讨论】：

你能检查一下浏览器控制台是否有错误吗？如果有，导航到新组件将不会运行。
意味着我必须在加载之前修复这些错误？有四个错误。那些是关于 youtube 嵌入视频的
你能修复它们还是需要帮助？如果你使用 chrome，angular 会提供更多用户友好的错误信息。可能有一个根本原因导致所有这些错误
我确实需要帮助，我试图将放在我的 app.component.html 中，但它使我的主页显示两次而不是一次，并且链接不工作。
你能创建一个示例仓库吗？

标签： angular routing

【解决方案1】：

试试这个stackblits example code

【讨论】：

【解决方案2】：

角度路由

Angular 路由现在在 app.module.ts 中不起作用。在这种情况下，您需要在 App.routingmodule.ts 中添加该路径和组件。像这样……

const appRoutes: Routes = [
  { path: 'crisis-center', component: CrisisListComponent },
  { path: 'hero/:id',      component: HeroDetailComponent },
  {
    path: 'heroes',
    component: HeroListComponent,
    data: { title: 'Heroes List' }
  },
  { path: '',
    redirectTo: '/heroes',
    pathMatch: 'full'
  },
  { path: '**', component: PageNotFoundComponent }
];

@NgModule({
  imports: [
    RouterModule.forRoot(
      appRoutes,
      { enableTracing: true } // <-- debugging purposes only
    )
    // other imports here
  ],
  ...
})
export class AppModule { }

【讨论】：