我正在尝试使用 2 个按钮在应用程序组件内的两个 angular 组件之间切换

Question

我正在开发一个应用程序，该应用程序的设计需要 2 个按钮，每个按钮将显示一个不同的嵌套应用程序。我不能为此使用 angular 路由。

2 个按钮将放置在 app.component 内。

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

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

我认为有一种方法可以使用 ngSwtich 和 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>

我一直在这里玩 Stackblitz：https://stackblitz.com/edit/primeng-selectbutton-demo-6simfg

Answer 1

在下一节中发现了一些错误

应该是“'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>

更正所选类型的值

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

例子

https://stackblitz.com/edit/primeng-selectbutton-demo-xgtbaw

Answer 2

component.ts

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'}
        ];
}

}

我正在尝试使用 2 个按钮在应用程序组件内的两个 angular 组件之间切换

I'm trying to switch between two angular components inside the app component with 2 buttons

html

javascript

primeng

angular