Javascript I'；我试图用两个按钮在应用程序组件内部的两个角度组件之间切换

我正在开发一个应用程序，它的设计需要两个按钮，每个按钮都会显示一个不同的嵌套应用程序。我不能用角度布线

这两个按钮将放置在app.component内

单击按钮A将显示嵌套组件A

单击按钮B将显示嵌套组件B

我认为有一种方法可以用ngswitch和ngSwitchcase做到这一点，但我完全可以做到

export class AppComponent { 

    types: SelectItem[];

    selectedType: string


    constructor() {
        this.types = [
            {label: 'Button A', value: 'A'},
            {label: 'Button B', value: 'B'}
        ];
}

}

这是html

<h3 class="first">Choose View</h3>
<p-selectButton [options]="types" [(ngModel)]="selectedType"></p-selectButton>

<p>Selected Type: <span style="font-weight: bold">{{selectedType}}</span></p>







<!-- Switching Mechanism -->

<div [ngSwitch]="'selectedType'">
  <li *ngSwitchCase="A"> <app-component-a></app-component-a>
  <li *ngSwitchCase="B">  <app-component-b></app-component-b>
  <li *ngSwitchDefault><app-component-b></app-component-b>
</div>

选择查看
所选类型：{{selectedType}

在以下部分中看到一些错误

应该是“'A'”和“'B'”

应该是[ngSwitch]=“selectedType”

“”的右大括号有误

<div [ngSwitch]="selectedType">
  <li *ngSwitchCase="'A'"> <app-component-a></app-component-a></li>
  <li *ngSwitchCase="'B'">  <app-component-b></app-component-b></li>
</div>

示例

组件.ts

constructor() {
    this.types = [
        {label: 'Button A', value: 'A'},
        {label: 'Button B', value: 'B'}
    ];
}

import { Component } from '@angular/core';
import {SelectItem} from 'primeng/api';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent { 

    types: SelectItem[];
    selectedType: string = 'Button A';


    constructor() {
        this.types = [
            {label: 'Button A', value: 'Button A'},
            {label: 'Button B', value: 'Button B'}
        ];
}

}

component.html

import { Component } from '@angular/core';
import {SelectItem} from 'primeng/api';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent { 

    types: SelectItem[];
    selectedType: string = 'Button A';


    constructor() {
        this.types = [
            {label: 'Button A', value: 'Button A'},
            {label: 'Button B', value: 'Button B'}
        ];
}

}

这里是工作演示，谢谢！我明白我把事情搞砸了！