Question

有没有办法在另一个组件中定位模板引用变量？
我想通过创建一个通过TRV sidenav调用sidenav的open函数的事件来触发 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指令中定位应用程序组件中的模板变量？

Answer 1

我看到了几个选项。

一，您可以创建一个包含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();
  }
}

并在您的app控制器中

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

  constructor(private sidenavService: SidenavService) {}

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

然后，您可以将SidenavService注入您想要访问它的任何其他组件。

其他选项是简单地将sidenav作为topbar的输入。

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

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

我个人不喜欢第二个选项，因为我不喜欢不必要地暴露sidenav。我宁愿只使用该服务并控制其他人可以用它做什么。

从Angular 2中的另一个组件定位模板引用变量

1 个答案: