點擊事件hidde 2組件Angular 4

Question

我有1個根組件，有3個子組件，我在其中放置了一些@input來獲得點擊事件，他們稱它們成功地視圖，所以當我點擊根目錄時，我想打開一個子組件（工作正常），但在同一時間，我希望其他兩個人從視圖等消失，但每個人分離（div.hidden的種類）...如果你需要更多的代碼或解釋事先沒有

這裏猶豫....感謝是我的根component.html：

<div class="daydetail"> 
    <h1>Detail of day</h1> 
<button pButton class="daydetail" type="button" icon="fa-chevron-up" label="Click"(click)="toggleChild()"></button> 
    <div> 
     <my-daydetail [showMePartially]="showVar"></my-daydetail> 
    </div> 
</div> 

<div class="dailyreport"> 
    <h1>Daily</h1> 
    <my-dailyreport></my-dailyreport> 
</div> 

<div class="inventory"> 
    <my-inventory></my-inventory> 
</div> 

這裏是我的根component.ts：

export class AppliV2Component { 
    showVar = false; 
    hideVar = true; 

    constructor(public userService: UserService) { 
    } 
    toggleChild() { 
     this.showVar = !this.showVar; 
     this.hideVar = !this.hideVar; 
     } 
} 

首先child.html：

<div *ngIf="hideMePartially" class="dailyreport"> 
    <h1>Daily report</h1> 
</div> <!-- Fin de dailyreport --> 

首先child.ts：

export class MyDailyreportComponent implements OnInit { 


@Input() hideMePartially: boolean; 
    constructor() { } 

二child.html：

<div *ngIf="showMePartially" class="daydetail2" > <!-- this part will be toggled by the parent component button --> 


<h1>Informations</h1> 
</div> 

二child.ts：

export class MyInventoryComponent implements OnInit { 
     @Input() hideMePartially: boolean; 

Answer 1

首先，* ngIf不會隱藏/顯示組件。它會添加/刪除它。有一個區別。要隱藏組件，你應該使用[hidden]="true/false"

在你的情況，你可以這樣做：

<div [hidden]="displayDetail" class="daydetail2" > 

然後就是在組件打字稿創建displayDetail boolean類型的變量。

之後，您可以輕鬆創建切換方法，將displayDetail設置爲true或false。

toggleDisplay(){ 
    this.displayDetail != this.displayDetail; 
} 

您可以在模板中調用該方法。

<button (click)="toggleDisplay();"> Toggle Button </button> 

注：的CSS爲[隱藏]可能會被覆蓋，所以你可能要添加到您的組件CSS

[hidden] { display: none !important;}