如何 hide/show 组件使用基于来自单独组件的布尔值的 ngif

Question

我正在尝试 show/hide 当用户单击子组件中的按钮时，父组件中的元素。我不确定是我做错了什么，还是我的方法完全错误

父组件

<div *ngIf="show">Hello World</div>
<div *ngIf="!show">Goodbye World</div>

子组件

<button (click)="showHello()">
 <i class="fas fa-plus"></i>
</button>

子组件 .ts 文件

show: boolean = false;

showHello() {
    this.show = !this.show;
    console.log('show', this.show);
 }

Answer 1

parent:

<hello #hello></hello>
<p>
  {{hello.show}}
</p>

child:

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

@Component({
  selector: 'hello',
  template: `<button (click)="showHello()">
              Show
              </button>`,
  styles: [`h1 { font-family: Lato; }`]
})
export class HelloComponent  {
  show: boolean = false;

  showHello() {
      this.show = !this.show;
      console.log('show', this.show);
  }
}

Live demo

如何 hide/show 组件使用基于来自单独组件的布尔值的 ngif

How to hide/show component using ngif based on boolean from separate component

javascript

angular-ng-if

angular