当用户单击子组件中的按钮时,我尝试显示/隐藏父组件中的元素。我不确定我是否做错了什么或者我的方法完全错误
父组件
<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);
}
最佳答案
父级:
<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);
}
}
关于javascript - 如何使用基于来自单独组件的 bool 值的 ngif 隐藏/显示组件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55731553/