Angular 2：從不同的組件切換sidenav

我有一個我想從另一個組件打開的sidenav。我爲此創建了一個服務，因爲它不是父/子關係，但我始終將導航返回爲未定義狀態。我究竟做錯了什麼？Angular 2：從不同的組件切換sidenav

這是服務：

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

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

    public setSidenav(sidenav: MdSidenav) { 
    this.sidenav = sidenav; 
    } 

    public open(): Promise<MdSidenavToggleResult> { 
    return this.sidenav.open(); 
    } 

    public toggle(isOpen?: boolean): Promise<MdSidenavToggleResult> { 
    return this.sidenav.toggle(isOpen); 
    } 
    constructor() { 
    } 
}

這與sidenav InstellingenComponent的HTML（我刪除了一些內容，因此它更具可讀性）：

<md-sidenav #sidenav align="end" mode="side" opened="true"> 
    <div> 
    <h3>Weergave aanpasssen</h3> 
    <section class="instellingen"> 
      <h3>Kleuren</h3> 
     </form> 
    </section> 
    </div> 
    </md-sidenav>

在另一部分，我有：

export class AppComponent implements OnInit { 

    constructor(private sidenavService: SidenavService) { 
    } 

    ngOnInit(): void { 
     } 

    public toggleSidenav() { 
    this.sidenavService 
     .toggle() 
     .then(() => { 
     }); 
    } }

和下面的HTML：

<button md-icon-button (click)="toggleSidenav()" class="button"> 
<md-icon>settings</md-icon></button>

來源

2017-06-10 Klaartje De Backer

您是否使用'setSidenav'函數設置了對側導航的引用？如果是這樣，你能請張貼那部分代碼嗎？ – CodeWarrior

您可以發佈InstellingenComponent.ts文件的內容嗎？ – CodeWarrior

嗯..我沒有任何與InstellingenComponent.ts有關的東西...我忘記了什麼嗎？ –

您需要在sidenav服務中設置對sidenav的引用，以便服務可以打開/關閉sidenav。否則，將永遠是undefined

爲了做到這一點，打開InstellingenComponent.ts文件（其模板有側面導航組件的組件），並進行以下修改：

加入這行代碼來獲取在模板側面導航組件的引用（添加這個最好是在頂部，略低於export class InstellingenComponent語句）
@ViewChild('sidenav') public sidenav: MdSidenav;

裏面的構造，注入SidenavService像下面（注意，把它添加到那些你已經可能有）

public constructor(
    private sidenavService: SidenavService 
)

確保類實現如下所示的OnInit。
export class InstellingenComponent implements OnInit

最後，在ngOnInit()功能（添加新的，如果不存在），這樣設置參考sidenav：

public ngOnInit(): void { 
    this.sidenavService 
     .setSidenav(this.sidenav); 
    }

來源

2017-06-10 19:12:16 CodeWarrior

啊哈！這工作！感謝您的幫助。我發現角度相當困難，但不放棄:) –

在下面的服務切換功能this.sidenav是不確定的。

public toggle(isOpen?: boolean): Promise<MdSidenavToggleResult> { 
    return this.sidenav.toggle(isOpen); 
    }

來源

2017-08-13 20:53:06 user8459359

萬一別人恰好是在同一條船上：

import {MdSidenav, MdSidenavToggleResult} from "@angular/material";

應該是：

import {MdSidenav, MdDrawerToggleResult} from "@angular/material";

不要忘記去改變它的承諾也在裏面。

我使用

"@angular/material": "^2.0.0-beta.10"

順便說一句，從@CodeWarrior的答案是正確的。它也幫助了我。

來源

2017-10-09 18:33:43

Angular 2：從不同的組件切換sidenav

回答

相關問題