2017-05-31 196 views
0

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

這裏猶豫....感謝是我的根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; 
+1

在根component.html代碼,''hideMePartially''不會作爲''input'傳遞給''''。 –

+0

@SameerK謝謝,這是對的我忘了把它放在我的代碼 –

回答

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

非常感謝您的幫助我會試試這個,然後讓你知道 –

+0

沒問題,讓我知道它是怎麼回事 – Dino

+0

事情是我想[隱藏] benn也可以通過按鈕根組件 –