Javascript 如何使用基于布尔值的ngif隐藏/显示独立组件

当用户单击子组件中的按钮时，我试图显示/隐藏父组件中的元素。我不确定我是做错了什么，还是我的方法完全错了

父组件

你好，世界
再见世界

子组件

子组件.ts文件

show: boolean = false;

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

家长：

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

{{你好，秀}

儿童：

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);
  }
}

从'@angular/core'导入{Component，Input}；
@组成部分({
选择器：“你好”，
模板：`
显示
`,
样式：[`h1{font-family:Lato；}`]
})
导出类HelloComponent{
show:boolean=false；
showHello（）{
this.show=！this.show；
console.log（'show'，this.show）；
}
}