Angular 2 使用带布尔值的 *ngIf 隐藏和显示元素

Question

我想使用位于另一个组件中的按钮来显示和隐藏元素。

所以我有一个仪表板，里面有一些腔室和一个 header。

HTML 的 DashboardComponent 与 app-header 和 app-chamber：

 <app-header></app-header>
    <div class="container">
      <div class="row">
        <app-chamber [kamers]="kamers"></app-chamber>
      </div>
    </div>

我的 ChamberComponent 中有这个 HTML 和 *ngIf：

<div class="col-sm-6 col-md-4 col-lg-3 cardcol" *ngFor="let kamer of kamers; let i = index">
      <md-card class="chamber wit" *ngIf="kamer.patient == null">
         <p *ngIf="showId">{{kamer.id}}</p>
      </md-card>
</div>

在 HeaderComponent 中我有一个需要显示和隐藏元素的按钮 :

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

  @Input() aList;

  dashboardComponent:DashboardComponent;

  chamberComponent:ChamberComponent;

  constructor(dashboardComponent: DashboardComponent, chamberComponent:ChamberComponent) {
    this.dashboardComponent = dashboardComponent;
    this.chamberComponent = chamberComponent;

  }

  ngOnInit() {

  }

// THIS GETS CALLED BY A BUTTON CLICK
  toggleId(){
    this.chamberComponent.toggleId();
  }

}

然后是我的 ChamberComponent 代码：

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

      @Input() kamers;
      showId:boolean;

      constructor() {
        this.showId=false;
      }

      ngOnInit() {

      }

      toggleId = () => {
          this.showId = !this.showId;
      }

    }

因此，当我单击该按钮时，值发生变化（我已将其记录在控制台中）但视图未更新..

当我在我的 ChamberComponent 中放置一个调用 toggleId() 函数的按钮时，视图会收到更新并且元素会显示或隐藏。

但我需要通过 header 上的按钮进行切换。

Answer 1

Plunker

@Input() kamers 和模板 *ngIf="kamer.patient == null" 之间有一点不匹配。

• 只需将输入更改为kamer。

模板HTML

<md-card class="chamber wit" *ngIf="kamer.patient === null">
   <p *ngIf="showId">{{kamer.id}}</p>
</md-card>

<button (click)="toggleId()">Toggle</button>

组件

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

  kamer = {
    patient: null,
    id: '1'
  };
  showId = false;

  ngOnInit() {

  }

  toggleId() {
    this.showId = !this.showId;
  }

}

更新 (1) - Plunker (1)

使用@ViewChild

要引用子组件的功能，请使用 ViewChild

• 在父组件中放置@ViewChild('child') child;
• 在父模板中引用子函数是这样的：<button (click)="child.toggleId()">Toggle</button>

父组件

@Component({
  selector: 'material-app',
  template: `
    <material-child #child></material-child>
    <button (click)="child.toggleId()">Toggle</button>
  `
})
export class AppComponent {

  @ViewChild('child') child;

}

子模板

<md-card class="chamber wit" *ngIf="kamer.patient === null">
   <p *ngIf="showId">{{kamer.id}}</p>
</md-card>

子组件

@Component({
  selector: 'material-child',
  templateUrl: 'app.component.html'
})
export class ChildComponent {

  kamer = {
    patient: null,
    id: '1'
  };
  showId = false;

  ngOnInit() {

  }

  toggleId() {
    this.showId = !this.showId;
  }

}

更新 (2) - Plunker (2)

使用@Output() + EventEmitter

要扩展以前的设置以使用兄弟组件，您可以

• 让兄弟姐妹使用 EventEmitter
发出事件
• 监听父组件发出的事件，使用ViewChild
调用需要的子函数

同级组件

@Component({
  selector: 'material-sibling',
  template: `
    <button (click)="toggle.emit()">Toggle</button>
  `
})
export class SiblingComponent {
  @Output() toggle = new EventEmitter();
}

父组件

@Component({
  selector: 'material-app',
  template: `
    <material-child #child></material-child>
    <material-sibling (toggle)="child.toggleId()"></material-sibling>
  `
})
export class AppComponent {

  @ViewChild('child') child;

}

子模板

<md-card class="chamber wit" *ngIf="kamer.patient === null">
   <p *ngIf="showId">{{kamer.id}}</p>
</md-card>

子组件

@Component({
  selector: 'material-child',
  templateUrl: 'app.component.html'
})
export class ChildComponent {

  kamer = {
    patient: null,
    id: '1'
  };
  showId = false;

  ngOnInit() {

  }

  toggleId() {
    this.showId = !this.showId;
  }

}