角度のある素材2ドームにあるにもかかわらずサイドナップが表示されない

Question

sidenavとヘッダーがサービスを共有する異なるコンポーネントであるという問題があります。これは、sidenav要素を調べて、私が開閉を切り替えるのを見ることができるときに動作しているように見えます。私がこれを持っている問題は、実際にはシデナヴが現れないということです。

コンポーネントファイル：

import { Component, OnInit, ViewChild } from '@angular/core'; 

import { MdSidenav } from '@angular/material'; 

import { SidenavToggleService } from './shared/sidenavToggle.service'; 

@Component({ 
    selector: 'app-sidenav', 
    templateUrl: './sidenav.component.html', 
    styleUrls: ['./sidenav.component.css'] 
}) 
export class SidenavComponent implements OnInit { 
    @ViewChild('sidenav') sidenav: MdSidenav; 

    /** 
    * Constructor of the class. 
    * @param {sidenavService} SidenavToggleService 
    */ 
    constructor(public sidenavService: SidenavToggleService) {} 

    /** 
    * OnInit life cycle hook 
    */ 
    public ngOnInit(): void { 
    this.sidenavService.setSidenav(this.sidenav); 
    } 

} 

HTMLファイル：

<md-sidenav-container> 
    <md-sidenav #sidenav mode="over"> 
testerer 
    </md-sidenav> 
</md-sidenav-container> 

サービスファイル：

import { Injectable } from '@angular/core'; 
import { MdSidenav, MdSidenavToggleResult } from '@angular/material'; 

@Injectable() 
export class SidenavToggleService { 
    private sidenav: MdSidenav; 

    /** 
    * Setter for sidenav. 
    * 
    * @param {MdSidenav} sidenav 
    */ 
    public setSidenav(sidenav: MdSidenav) { 
    this.sidenav = sidenav; 
    } 

    /** 
    * Open this sidenav, and return a Promise that will resolve when it's fully opened (or get rejected if it didn't). 
    * 
    * @returns Promise<MdSidenavToggleResult> 
    */ 
    public open(): Promise<MdSidenavToggleResult> { 
    return this.sidenav.open(); 
    } 

    /** 
    * Close this sidenav, and return a Promise that will resolve when it's fully closed (or get rejected if it didn't). 
    * 
    * @returns Promise<MdSidenavToggleResult> 
    */ 
    public close(): Promise<MdSidenavToggleResult> { 
    return this.sidenav.close(); 
    } 

    /** 
    * Toggle this sidenav. This is equivalent to calling open() when it's already opened, or close() when it's closed. 
    * 
    * @param {boolean} isOpen Whether the sidenav should be open. 
    * 
    * @returns {Promise<MdSidenavToggleResult>} 
    */ 
    public toggle(isOpen?: boolean): Promise<MdSidenavToggleResult> { 
    console.log('uh'); 
    return this.sidenav.toggle(isOpen); 
    } 
} 

編集：私は持っている理由私は......

<div > 
 
    <md-sidenav-container> 
 
    <app-header></app-header> 
 
    <app-sidenav></app-sidenav> 
 
    </md-sidenav-container> 
 
    test 
 
</div>

を私はsidenav-コンテナ内のツールバーコンポーネントをラップする必要がありました

Answer 1

を使用していたサービスを追加しましたそれを行うには私は分かりませんが、今は動作します。私は現在ポジションなどで仕事をしなければならない