有沒有一種方法可以從Angular 2中的另一個組件中定位模板引用變量？

我想知道是否有一種方法在另一個組件中定位模板引用變量。我在這裏要做的是通過創建一個通過TRV'sidenav'調用sidenav的開放函數來觸發side nav。有沒有一種方法可以從Angular 2中的另一個組件中定位模板引用變量？

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() { 
    } 
}

是否有可能對我來說，目標在從頂欄指令的應用程序組件的模板變量？

來源

2016-09-22 Joshua Young

我不認爲這是可能的，但你可以將它綁定到頂欄中的事件，然後決定何時打開/關閉導航 – galvan

我看到了幾個選項。

一，你可以創建一個服務來保存sidenav實例。您可以從應用程序組件設置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成任何其他組件，您要到哪裏訪問它。

其他選項是簡單地將sidenav作爲頂欄的輸入。

<topbar [sidenav]="sidenav"></topbar> 

class TopbarComponent { 
    @Input() sidenav: MdSidenav; 
}

我個人不喜歡第二個選項，因爲我不喜歡不必要的暴露sidenav。我寧願只使用服務並控制別人可以用它做什麼。

來源

2016-09-23 02:17:39

有沒有一種方法可以從Angular 2中的另一個組件中定位模板引用變量？

回答

相關問題