鍍金池/ 問答/HTML/ angular中父組件怎樣控制子組件的顯示與隱藏

angular中父組件怎樣控制子組件的顯示與隱藏

效果描述：當(dāng)屏幕縮小 小于768px時(shí)，聊天框先隱藏，點(diǎn)擊交談按鈕 顯示聊天框 點(diǎn)擊關(guān)閉按鈕 關(guān)閉聊天框
clipboard.png

父組件代碼：
父組件綁定事件：
<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()">關(guān)閉</button>
子組件類文件中的方法：
@Output() voted = new EventEmitter<boolean>();

vote() {

this.voted.emit(false);

}

回答
編輯回答
深記你

單憑你給出的信息我不足以幫你解決問題，但是我能看出你目前的幾個(gè)問題

  • *ngIf這是控制button的顯示/關(guān)閉的，不是控制子組件。
  • 控制顯示/隱藏最好使用[hidden]=“expression”進(jìn)行操作，這樣會減少DOM操作，提升效率。

希望你能多給點(diǎn)信息，比如父子組件，這樣才能幫到你。

2017年10月1日 06:33
編輯回答
淚染裳

可以直接在子組件中添加一個(gè)樣式綁定[style.display]="show";
在父組件中的css中直接將屬性設(shè)置為“none”
然后再父組件中的點(diǎn)擊事件中直接將屬性設(shè)置為“block”

2018年2月17日 23:15
編輯回答
柒槿年

父組件控制子組件的關(guān)閉隱藏，你必須要給子組件綁定一個(gè)父組件控制的變量。

你這里<button>標(biāo)簽是子組件，這是明顯不對的。你的子組件明顯是應(yīng)該是下面那個(gè)聊天組件吧。

父組件

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

當(dāng)然你用*ngIf也行，只是看你的業(yè)務(wù)，[style.display]可能更適合你

建議多看一下文檔組件交互

2017年7月22日 04:13
編輯回答
薄荷糖

直接用 ngIf 不就可以嗎？DEMO

難道是我對你的問題描述理解有誤？

2018年9月12日 20:16