Question

我一直在尝试从我的主页路由以加载其他组件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

上保持

Answer 1

角度路由

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

import './assets/logo.png';

Answer 2

尝试这个stackblits example code

角度布线-组件未显示

2 个答案: