Angular 6 - 在主要组件中的两个组件之间切换[关闭]答案

【问题标题】：Angular 6 - Switch between two components in main component [closed]Angular 6 - 在主要组件中的两个组件之间切换[关闭]
【发布时间】：2019-05-04 21:40:07
【问题描述】：

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

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

有什么想法吗？

【问题讨论】：

标签： angular routing

【解决方案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'
      }
    ]
  }
];

【讨论】：

【解决方案2】：

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

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

【讨论】：