2016-06-08 95 views
0

試圖構建一個頁面的應用程序,它將有一個搜索div然後結果div。Angular 2單頁實例

export class AppComponent implements OnInit{ 

    // Div visability. 
    searchVisible = true; 
    resultsVisible = false; 
} 


<div class="container"> 
     <search *ngIf="searchVisible == true"></search> 
     <results [resultsVisible]="resultsVisible" *ngIf="resultsVisible == true"></results> 
</div> 

一旦結果組件獲得的數據由搜索表格後面,就會切換到resultsVisible真實,所以我從AppComponent傳遞resultsVisible到ResultsComponent。

但是,這不是atm工作。

我不知道這是否讓其他人這樣做,但我仍然無法正確隱藏/顯示div。

有人能給我看一個例子,說明一個「單頁」應用程序如何在隱藏/顯示元素的Angular 2中工作。

感謝

回答

1

嘗試使用[hidden]。像這樣的東西

<div class="container"> 
    <search [hidden]="!searchVisible"></search> 
    <results [hidden]="!resultsVisible"></results> 
</div> 
+0

有可能使用該方法在div中淡入/淡出? – tony

+0

你應該可以使用任何標準的CSS轉換你想要的。 – Rob

+0

嘗試了一些方法,但不可能得到它的工作...不知道如何定位的股利或 試圖做這樣的事情: 隱藏{ -webkit-過渡:不透明2秒;/* Safari */ 過渡:不透明度2s; } 但無效 – tony