如何显示或隐藏Angular [closed]中的三个组件

Question

关闭。这个问题需要details or clarity。它当前不接受答案。

---

是否要改善此问题？通过editing this post添加详细信息并澄清问题。

关闭昨天。

我有一个带有三个按钮的菜单，根据我单击的按钮，我会显示一个组件或另一个组件。有三个按钮，因此具有true或false的布尔值对我不起作用。

提前感谢。

menu.component.html是：

<div class="p-2">menu works!<br>
<button type="button" class="btn btn-primary" (click) = activarComponente() >Gestión de usuarios</button>
<button type="button" class="btn btn-danger" (click) = activarComponente()>Gestión de productos</button>
<button type="button" class="btn btn-primary" (click) = activarComponente()>Gestión de pedidos</button>

<div *ngIf="option == 0">
    <gestion-usuarios></gestion-usuarios>
</div>

  <div *ngIf="option == 1">
    <gestion-productos></gestion-productos>
  </div>

  <div *ngIf="option == 2">
    <gestion-pedidos></gestion-pedidos>
  </div>

文件gestion-productos.component.ts（管理顺序和用户相同，但更改了选项的值）：

 import { Component, OnInit } from '@angular/core';

    @Component({
      selector: 'gestion-productos',
     templateUrl: './gestion-productos.component.html',
     styleUrls: ['./gestion-productos.component.css']
  })
 export class GestionProductosComponent implements OnInit {

  opcion:number =1;

  constructor() { }

  ngOnInit(): void {
  }

}

menu.component.ts：

 import { Component, OnInit, Output } from '@angular/core';



@Component({
  selector: 'menu',
  templateUrl: './menu.component.html',
  styleUrls: ['./menu.component.css']
})


export class MenuComponent implements OnInit {
  option:number;
  @Output() opcion:number;

 activarComponente(){
   this.option = this.opcion;
 }


  constructor() { }

  ngOnInit(): void {
  }

}

Answer 1

<button type="button" class="btn btn-primary" (click)="activarComponente(0)">Gestión de usuarios</button>
<button type="button" class="btn btn-danger" (click)="activarComponente(1)">Gestión de productos</button>
<button type="button" class="btn btn-primary" (click)="activarComponente(2)">Gestión de pedidos</button>

<div [ngSwitch]="option">
  <gestion-usuarios *ngSwitchCase="0"></gestion-usuarios>
  <gestion-productos *ngSwitchCase="1"></gestion-productos>
  <gestion-pedidos *ngSwitchCase="2"></gestion-pedidos>
</div>

import { Component } from '@angular/core';

@Component({
  selector: 'menu',
  templateUrl: './menu.component.html',
  styleUrls: ['./menu.component.css']
})
export class MenuComponent {

  option: number;

  activarComponente(option: number) {
    this.option = option;
  }
}