角度材料を使用してサイドナビゲーションコンポーネントを作成する方法2

Question

エキスパート

side nav componentをangular material 2としたいと思います。

side nav componentとcontents componentを分離したいと思います。

私は2つのコンポーネントを作成します。サイドナビとコンテンツ。

<!--contents.component.html--> 
<md-sidenav-container> 
    <app-side-nav></app-side-nav> 
    <div>Main content</div> 
</md-sidenav-container> 

<!--side-nav.component.html--> 
<md-sidenav mode="side" opened="true"> 
    <md-list> 
    <md-list-item><i class="material-icons" [ngClass]="{'active': activatePath === 'main'}">home</i></md-list-item> 
    <md-list-item><i class="material-icons" [ngClass]="{'active': activatePath === 'user'}">person</i></md-list-item> 
    <md-list-item><i class="material-icons" [ngClass]="{'active': activatePath === 'gas-setting'}">settings</i></md-list-item> 
</md-list> 
</md-sidenav> 

しかし、このコードはうまくいきません。

今、私は別の2つのコンポーネントのために行うにはどうすればよい

作業期待

を働い??

Answer 1

ちょうどあなたが、私は別のコンポーネントでサイドナビゲーションを使用している場合、私はどのようにすればいいの容器

<md-sidenav-container> 
<!--side nav component--> 
<md-sidenav mode="side" opened="true"> 
    <md-list> 
    <md-list-item><i class="material-icons" [ngClass]="{'active': activatePath === 'main'}">home</i></md-list-item> 
    <md-list-item><i class="material-icons" [ngClass]="{'active': activatePath === 'user'}">person</i></md-list-item> 
    <md-list-item><i class="material-icons" [ngClass]="{'active': activatePath === 'gas-setting'}">settings</i></md-list-item> 
</md-list> 
</md-sidenav> 

    <app-side-nav></app-side-nav> 
    <div>Main content</div> 
</md-sidenav-container> 

Here is working plunker