有没有办法在另一个组件中定位模板引用变量?
我想通过创建一个通过 TRV sidenav
调用 sidenav 的打开函数的事件来触发 side nav。
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 指令来定位应用程序组件中的模板变量?
最佳答案
我看到了几个选项。
一,您可以创建一个保存 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();
}
}
在你的应用 Controller 中
class AppComponent implements AfterViewInit {
@ViewChild(MdSidenav) sidenav: MdSidenav;
constructor(private sidenavService: SidenavService) {}
ngAfterViewInit() {
this.sidenavService.sidenav = this.sidenav;
}
}
然后您可以将 SidenavService
注入(inject)到您想要访问它的任何其他组件中。
其他选项是简单地将侧导航作为顶栏的输入。
<topbar [sidenav]="sidenav"></topbar>
class TopbarComponent {
@Input() sidenav: MdSidenav;
}
我个人不喜欢第二种选择,因为我不喜欢不必要地暴露侧导航。我宁愿只使用该服务并控制其他人可以用它做什么。
关于javascript - 将 Angular 2 中另一个组件的模板引用变量作为目标,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39650294/