Angular 4 从另一个组件访问元素

Question

我正在尝试创建侧边导航和工具栏。我想为每个组件创建单独的组件，所以我创建了 2 个不同的组件

代码<app-sidenavmenu>

<md-sidenav-container class="sidenav-container">
    <md-sidenav mode="push" class="sidenav" opened="false" #sidenav>
        <md-list>
            <md-list-item>...</md-list-item>
        </md-list>
    </md-sidenav>
</md-sidenav-container>

和代码 <app-toolbar>

<md-toolbar>
    <span><button md-button (click)="sidenav.toggle()"><md-icon>menu</md-icon></button></span>
    <span><h2>App name</h2></span>
</md-toolbar>

在第三个家庭组件中，我使用上述组件

现在我想访问 #sidenav从侧边导航组件到工具栏组件，这样侧边导航将通过切换功能切换

如何实现。

Answer 1

一种方法是让 AppComponent 管理侧边栏的状态。它有一个边栏和导航栏都有引用的对象。导航栏会更改它，侧边栏会响应。

@Component({
  selector: 'my-app',
  template: `
    <my-navbar  [state]="state"></my-navbar>
    <my-sidebar [state]="state"></my-sidebar>
  `
})
export class App implements OnInit {
  state = {
    showSideBar: true;
  };
}

@Component({
  selector: 'my-navbar',
  template: `
    <div>
      <span class="toggle" (click)="toggleSideBar()">Toggle</span> Navbar
    </div>
  `
})
export class NavBar implements OnInit {
  @Input() state: any;

  toggleSideBar() {
    this.state.showSideBar = !this.state.showSideBar;
  }
}

@Component({
  selector: 'my-sidebar',
  template: `
    <div *ngIf="state.showSideBar">SideBar</div>
  `
})
export class SideBar implements OnInit {
  @Input() state: any;
}

这是一个笨蛋:

https://plnkr.co/edit/ldpG25?p=preview

另一种方法是拥有一个为您跟踪导航栏状态的服务。这将是一个非常简单的服务，但需要使用 Subject。主题有点像事件，因此您的 Navbar 会调用该服务来发出切换，而 SideBar 会订阅该服务并将切换推送给它。

希望这是有道理的，请随时提问!