Angular 6-在主要组件的两个组件之间切换

Question

我在Angular 6和bootstrap中有一个应用程序。我有一个主要组件，我希望能够在主要组件中的两个子组件之间切换，但仍停留在主要组件路线上。我在这里重新创建：

https://stackblitz.com/edit/angular-xujgmw

有什么想法吗？

Answer 1

您可以像这样在app-routing.module.ts中定义适当的路由：

const routes: Routes = [
  {
    path: '',
    component: FormComponent,
    children: [
      {
        path: 'detail',
        component: DetailsComponent,
      },
      {
        path: 'policy',
        component: PolicyComponent,
      },
      {
        path: '',
        redirectTo: 'detail',
        pathMatch: 'full'
      }
    ]
  }
];

Answer 2

您可以通过多种方式实现这一目标。

1. 使用路由：在您的应用模块中定义路由。根据任何事件（例如，单击按钮）更改路线。
2. 使用一些标志来设置显示哪个组件。更新标志并使用*ngIf显示/隐藏组件。
3. 使用*ngComponentOutlet在UI上呈现组件。