按下按钮渲染角度分量

Question

我试图在同一个Bootstrap 4模式中显示不同的Angular组件，具体取决于按下了哪个按钮。我有一个带有两个按钮的父组件：Button1和Button2。父组件呈现的组件只包含Bootstrap 4模态但将实际模态内容留空。单击Button1或Button2时，我希望模式分别与ChildComponent1或ChildComponent2一起显示。

Answer 1

在模态内容中，您可以使用*ngIf并使用变量指定要显示的内容。类似的东西：

<app-child1 *ngIf="showFirstChild"></app-child1>

<app-child1 *ngIf="!showFirstChild"></app-child1>

showFirstChild可以是布尔值。

如果您有多个组件，可以使用ngSwitch：

<div [ngSwitch]="componentToShow">
      <app-child1  *ngSwitchDefault></app-child1>
      <app-child2  *ngSwitchCase="2"></app-child2>
      <app-child3  *ngSwitchCase="3"></app-child3>
      <app-child4  *ngSwitchCase="4"></app-child4>
</div>

componentToShow可以是组件中的数字类型。

只需使用按钮点击即可为变量指定适当的值。

希望有所帮助。