选中“角-显示组件”复选框。每个复选框都有单独的组件。

Question

假设我有4个复选框。

<mat-checkbox>1</mat-checkbox>
<component-1></component-1>
<mat-checkbox>2</mat-checkbox>
<component-2></component-2>
<mat-checkbox>3</mat-checkbox>
<component-3></component-3>
<mat-checkbox>4</mat-checkbox>
<component-4></component-4>

每个mat-checkbox都有自己的component。当用户选中前3个复选框中的任何一个时，它将显示/加载组件，但如果用户选中了第4个mat-checkbox，它将取消选中上述三个mat-checkbox，从而导致组件隐藏，只显示第4个组件。

CASE1：-用户可以一起检查前三个中的任何一个。

CASE2 2：-用户可以检查前三名或第四名。

Answer 1

实例化

如果我无意中遗漏了什么，请告诉我。

我是这样做到的：

主应用程序模板：

    <hello name="{{ name }}"></hello>
<p>
  Start editing to see some magic happen :)
</p>

<mat-checkbox #checkOne (change)="OnChkChanged(1)">1</mat-checkbox>
<component-1 *ngIf="showOne"></component-1>

<mat-checkbox #checkTwo (change)="OnChkChanged(2)">2</mat-checkbox>
<component-2 *ngIf="showTwo"></component-2>

<mat-checkbox #checkThree (change)="OnChkChanged(3)">3</mat-checkbox>
<component-3 *ngIf="showThree"></component-3>

<mat-checkbox #checkFour (change)="OnChkChanged(4)">4</mat-checkbox>
<component-4 *ngIf="showFour"></component-4>

主应用程序组件：

import { Component, VERSION, ViewChild, ElementRef } from "@angular/core";

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  name = "Angular " + VERSION.major;
  @ViewChild("checkOne") checkOne: ElementRef;
  @ViewChild("checkTwo") checkTwo: ElementRef;
  @ViewChild("checkThree") checkThree: ElementRef;
  @ViewChild("checkFour") checkFour: ElementRef;

  showOne = false;
  showTwo = false;
  showThree = false;
  showFour = false;

  OnChkChanged(id: number) {
    if (id === 1) {
      this.showOne = !this.showOne;
    }
    if (id === 2) {
      this.showTwo = !this.showTwo;
    }
    if (id === 3) {
      this.showThree = !this.showThree;
    }
    if (id === 4) {
      this.showFour = !this.showFour;
      if (this.showFour === true) {
        this.uncheckAllThree();
      }
    }
  }

  uncheckAllThree() {
    this.checkOne["checked"] = false;
    this.showOne = false;
    this.checkTwo["checked"] = false;
    this.showTwo = false;
    this.checkThree["checked"] = false;
    this.showThree = false;
  }
}

ComponentOne：

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

@Component({
  selector: 'component-1',
  template: '<h3>I am Component 1</h3>',
})
export class ComponentOne  {
  
}

ComponentTwo：

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

@Component({
  selector: 'component-2',
  template: '<h3>I am Component 2</h3>',
})
export class ComponentTwo  {
  
}

ComponentThree：

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

@Component({
  selector: 'component-3',
  template: '<h3>I am Component 3</h3>',
})
export class ComponentThree  {
  
}

ComponentFour：

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

@Component({
  selector: 'component-4',
  template: '<h3>I am Component 4</h3>',
})
export class ComponentFour  {
  
}

Answer 2

我从问题中了解到，前三个复选框对第四个复选框没有影响，但是第四个复选框对上述三个复选框都有影响。

解决方案：

单击第四个复选框时，必须使用@Output()将事件传递给父组件，然后可以在包含其他复选框的三个独立组件中使用属性或调用方法。

您必须更改属性，以防您正在处理来自父组件的数据，并且您必须调用方法，以防您处理每个组件中的数据。

如果你不明白我说的话，那么如果你能向我们展示你在https://stackblitz.com/中的工作，那就太好了。

可能有多种解决方案。