Angular 包含更多组件的默认路由？

Question

是否可以将多个组件路由到默认路由？

我的路由模块看起来像：

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { BodyComponent } from './body/body.component';
import { ContactComponent } from './contact/contact.component';
import { NavbarComponent} from './navbar/navbar.component';
import { HomeComponent} from './home/home.component';
import { ErrorComponent} from './error/error.component';

const routes: Routes = [
  {
    path: '', component: BodyComponent,
  },
  {
    path: '', component: HomeComponent,
  },
  {
    path: '', component: NavbarComponent,
  },
  {
    path: 'contacts', component: ContactComponent,
  },

  /* Error */
  {
    path: '**', component: ErrorComponent/* Error Component */
  },
  
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

我的 app.component.html 看起来像：

<app-navbar>
    <app-body></app-body>
    <app-home></app-home>
    <app-contact></app-contact>
    <router-outlet></router-outlet>
    <app-footer></app-footer>
</app-navbar>

例如，如果我启动 http://localhost:4200/，我所有的组件都应该是空的 path: ''。

但是如果我打开 http://localhost:4200/contacts 那么只有联系人组件应该打开。

谢谢！

Answer 1

朋友我觉得你很迷，你用路由的时候每个组件一个路由，不然怎么Angular知道要打开哪个组件？。我认为您正在尝试使用导航栏导航器从一个组件导航到另一个组件，在这种情况下我建议使用路由器插座。 check this

Answer 2

将 *ngIf 与路由器结合使用对于根据 url.

显示组件非常有用

class AppComponent {
    constructor(private router: Router) { }
}

<app-navbar *ngIf="router.url === ''">
    <app-body></app-body>
    <app-home></app-home>
    <app-contact></app-contact>
    <router-outlet></router-outlet>
    <app-footer></app-footer>
</app-navbar>

Angular 包含更多组件的默认路由？

Angular default routing with more components?

routes

angular