angular中父组件怎样控制子组件的显示与隐藏

Question

效果描述：当屏幕缩小 小于768px时，聊天框先隐藏，点击交谈按钮 显示聊天框 点击关闭按钮 关闭聊天框

父组件代码：
父组件绑定事件：
<li class="list-group-item">

        <button class="btn btn-block btn-primary" *ngIf="show" (voted)="onVoted($event)">交谈</button>
      </li>

父组件类文件中的声明和方法：
show = true;

onVoted(agreed: boolean) {

this.show = agreed;

}

子组件代码：
子组件绑定事件：
<button class="btn btn-primary" (click)="vote()">关闭</button>
子组件类文件中的方法：
@Output() voted = new EventEmitter<boolean>();

vote() {

this.voted.emit(false);

}

Answer 1

父组件控制子组件的关闭隐藏，你必须要给子组件绑定一个父组件控制的变量。

你这里<button>标签是子组件，这是明显不对的。你的子组件明显是应该是下面那个聊天组件吧。

父组件

html:
<li class="list-group-item">
   <button class="btn btn-block btn-primary" (click)="onVoted($event)">交谈</button>
</li>

<!-- 子组件 -->
<div [style.display]="isVisible ? 'block':'none' ">
    <input />
    ....
</div>

父组件ts: 
public isVisible:boolean;

public onVoted() {
  this.isVisible = !this.isVisible;
}

当然你用*ngIf也行，只是看你的业务，[style.display]可能更适合你

建议多看一下文档组件交互

Answer 2

单凭你给出的信息我不足以帮你解决问题，但是我能看出你目前的几个问题

• *ngIf这是控制button的显示/关闭的，不是控制子组件。
• 控制显示/隐藏最好使用[hidden]=“expression”进行操作，这样会减少DOM操作，提升效率。

希望你能多给点信息，比如父子组件，这样才能帮到你。

Answer 3

可以直接在子组件中添加一个样式绑定[style.display]="show";
在父组件中的css中直接将属性设置为“none”
然后再父组件中的点击事件中直接将属性设置为“block”

Answer 4

直接用 ngIf 不就可以吗？DEMO

难道是我对你的问题描述理解有误？