Угловая маршрутизация - компонент не отображается

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

Попробуйте этот пример стекблитов

Answer 2

Угловая маршрутизация

Угловая маршрутизация не работает в 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 { }