別のコンポーネントのテンプレート参照変数を角度2でターゲットにする方法はありますか？

Question

別のコンポーネントでテンプレート参照変数をターゲットにする方法があるのだろうかと思っていました。私がここでやろうとしていることは、TRV 'sidenav'を介してサイドデーヴァーのオープン機能を呼び出すことでサイドナビゲーションをトリガーすることです。

app.component.html '

<md-sidenav-layout> 

    <md-sidenav #sidenav (open)="mybutton.focus()"> 
     Start Sidenav. 
     <br> 
     <button md-button #mybutton (click)="sidenav.close()">Close</button> 
    </md-sidenav> 

    <top-bar></top-bar> 

    <main class="main" (openNav)="sidenav.open()"> 
     <router-outlet></router-outlet> 
    </main> 

</md-sidenav-layout> 

`

topbar.component.html '

<md-toolbar color="primary"> 
    <button class="app-icon-button" (click)="openSideNav()"> 
    <i class="material-icons app-toolbar-menu">menu</i> 
    </button> 
    <span [routerLink]="['']">Home</span> 
    <span [routerLink]="['test']" class="navlink">Test</span> 
    <span class="navlink" (click)="signout()">signout</span> 
</md-toolbar> 

`

topbar.component.ts `

import { Component, OnInit, Output, EventEmitter } from '@angular/core'; 
@Component({ 
    selector: 'top-bar', 
    templateUrl: './topbar.component.html', 
    styleUrls: ['./topbar.component.css'] 
}) 
export class TopbarComponent implements OnInit { 
    constructor() { } 
    @Output() openNav = new EventEmitter(); 
    openSideNav(){ 
    console.log(this.openNav.emit()); 
    this.openNav.emit(); 
    } 
    ngOnInit() { 
    } 
} 

`

私はtopbarディレクティブからのアプリのコンポーネントでテンプレート変数をターゲットにすることは可能ですか？

Answer 1

私はカップルのオプションを参照してください。

1つは、sidenavインスタンスを保持するサービスを作成することができます。あなたはappコンポーネントからsidenavを設定することができます。

class SidenavService { 
    private _sidenav: MdSidenav; 

    set sidenav(nav: MdSidenav) { 
    this._sidenav = nav; 
    } 

    open() { 
    if (this._sidenav) this.sidenav.open(); 
    } 

    close() { 
    if (this._sidenav) this._sidenav.close(); 
    } 
} 

、アプリのコントローラで

class AppComponent implements AfterViewInit { 
    @ViewChild(MdSidenav) sidenav: MdSidenav; 

    constructor(private sidenavService: SidenavService) {} 

    ngAfterViewInit() { 
    this.sidenavService.sidenav = this.sidenav; 
    } 
} 

次に、あなたがそれにアクセスできるようにしたい他のどんなコンポーネントにSidenavServiceを注入することができます。

他のオプションは、単にサイドバーをトップバーの入力として持つことです。

私は個人的には2番目のオプションが嫌いですが、私はsidenavを不必要に公開したくありません。私はちょうどサービスを使い、他人がそれを使ってできることをコントロールしたいと思う。