管理多個FAB

看着Angular Material2 Spec，他們清楚地指出了放置FAB的位置。但是，我在執行時遇到問題。管理多個FAB

我的項目在根組件（app）中包含md-sidenav，我想在它的子組件中使用FAB，但是因爲它們包含在md-sidenav-container中，絕對定位某些東西並不像預期的那樣工作（我聽說。一些有關硬件加速和重寫軸，但如果有人能解釋一點更清楚 - 那將是巨大的

我就對材料的文檔，發現這個：

內sidenav晶圓廠：

對於具有FAB（或其他浮動元素）的sidenav，推薦的方法是將FAB放置在可滾動區域之外，並且將其絕對定位。

所以我有一些方向，但我不清楚如何管理這個許多組件和路由。

爲了完整起見，我已經包括了我的一些代碼：

app.component.html：

<md-sidenav-container> 
    <md-sidenav> 
    </md-sidenav> 
    <router-outlet></router-outlet> 
</md-sidenav-container>

sample component.html：

<md-toolbar><md-toolbar> 
<div class="page-content"> 
<!-- Page content starts here --> 
</div>

如果我跟隨的文檔，我的FAB將被放置在我的app.component.html：

<button md-fab><md-icon>filter_list</md-icon> 
<md-sidenav-container> 
    <md-sidenav> 
    </md-sidenav> 
    <router-outlet></router-outlet> 
</md-sidenav-container>

但是，我不希望在所有路由上顯示此按鈕（因爲這是app.component.html的情況），我希望此按鈕顯示何時某個組件（或路由）處於活動狀態。

在子路徑和組件中實現（並管理 - 顯示，隱藏，做其他事情，更改圖標）一個FAB與md-sidenav-container在app.component.html中的最佳方式是什麼？

我已經考慮了以下方法：

：

我可以將字段添加到我的App State稱爲「currentComponent」，並ngOnInit，每個組件都可以通過App Service（this.appservice.newCompInit(this.componentName)之類的函數）更新此字段
我可以通過「currentComponent」（currentComponent是app.component的一個子類）從app.component.html生成（或「注入」）FAB嗎？

接受其他方法。

來源

2017-06-21 Moshe

這可以通過創建單獨的<router-outlet></router-outlet>併爲每個路線定義一個晶圓廠組件來解決。

來源

2017-07-28 13:56:47 Moshe

回答

相關問題