固定要素はコンポーネントに相対的ですが、角度2のウィンドウではありません。

Question

私は、スタイリングにAngular2-materialライブラリを使用しているangle2アプリケーションを持っています。私はFAB（浮動アクションボタン）をアプリケーションの右隅にホバーするように追加しようとしていますが、それはウィンドウではなく親コンポーネントに固定されています。次のように

アプリケーションの階層は次のとおりです。app.componentテンプレート内

app.component 
|-detail.component 

、私はレイアウト指示の体内のルータ出口をMD-sidenavレイアウトディレクティブを使用しています：

詳細コンポーネントテンプレート内

<md-sidenav-layout> 
    <md-sidenav #sideNav (open)="closeStartButton.focus()"> 
    <router-outlet name="navMenu"></router-outlet> 
    <br> 
    <button md-button #closeStartButton (click)="sideNav.close()">Close</button> 
    </md-sidenav> 
    <md-toolbar color="primary"> 
    <button md-icon-button (click)="sideNav.toggle()"> 
     <md-icon class="md-24">menu</md-icon> 
    </button> 
    <span>{{title}}</span> 
    </md-toolbar> 
    <div role="main"> 
    <router-outlet></router-outlet> 
    </div> 
</md-sidenav-layout> 

、私はテンプレートの先頭に次き：

<button md-mini-fab class="fab" (click)="toggleAdd()"> 
    <i class="material-icons">add</i> 
</button> 

そのコンポーネントのCSS：私は詳細ページに移動するとき

.fab { 
    display: block; 
    position: fixed; 
    right: 2rem; 
    bottom: 2rem; 
    z-index: 10; 
} 

しかし、.fabは、コンポーネントではなく、窓に対して配置されています。詳細コンポーネントでencapsulation: ViewEncapsulation.Noneを使用しようとしましたが、それには影響しません。 Fabをディテールコンポーネント内で定義したままにする方法はありますか？それでも、ウィンドウに対して固定されていますか？

Answer 1

チェーンの上にCSSトランスフォームを適用するものを探します。私の場合は、角度アニメーションで変形を適用していました。どうやら変形ブレイク位置：固定。 Why does `transform` break `position: fixed`?

私はこの作業をどのように行うかを理解できれば幸いです。

Answer 2

私は非常によく似た質問hereに答えました。

要点：私は非常に重大な回避策でこれを解決しました。私はメインコンテンツからFABを削除し、テンプレート（外部md-sidenav-layout外）にセカンダリルータのアウトレットを定義し、FABのスタンドアロンコンポーネントを作成し、Observableをサービスで使用してクリックイベントをメインコンポーネントにブロードキャストしました。

他のスレッドの答えにはコードサンプルと作業中の例が含まれています。あなたのapp.component.htmlで

Answer 3

このコードを追加します。

<md-sidenav-container> 
    <md-sidenav mode="side" opened="true">Drawer content</md-sidenav> 
    <div class="my-content">Main content</div> 
</md-sidenav-container> 

グローバルStyles.cssを：

html, body, material-app, md-sidenav-container, .my-content { 
    margin: 0; 
    width: 100%; 
    height: 100%; 
} 

それは私の作品！ ;）