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

您需要创建一个新服务。 例如，如果函数 isOpened 为 true，则在两个组件之间共享并隐藏/显示 sidenav。您也可以在服务中创建一个 EventEmitter 并在 sidenav 组件中订阅它。

Answer 2

你可以先添加一个输出来获取事件： 首先导入它们：

import { Component, Output, EventEmitter } from '@angular/core';

之后在课堂上：

@Output() sidenavToggle = new EventEmitter();

在工具功能中：

toggle(){
 this.sidenavToggle.emit();
}

直接在组件中或从主组件调用其他函数：

<app-toolbar (sidenavToggle)="sidenav.toggle()"></app-toolbar>

Answer 3

您可以在侧边栏中创建输入变量，并从您的第三个组件传递其值，然后在工具栏中切换其值并将其输出到父（第三），这将反映侧边栏中的变化。

third.component.html

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

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

third.component.ts

export class ThirdComponent{
private sidebarState: boolean = false;


toggle(){
this.sidebarState = !this.sidebarState;
}

sidebar.component.ts

export class SidebarComponent {
@Input() sidebarState: boolean;

}

toolbar.component.ts

export class ToolbarComponent {
    @Output() change: EventEmitter<any> = new EventEmitter();

someEvent() {
this.change.emit();
    }

Answer 4

一种方法是让 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

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

希望这是有道理的，请随时提出问题！

Answer 5

我为此创建了共享服务：

@Injectable({providedIn: 'root'})
export class DashboardMenuService {
    private dashboardMenuToggleEventEmitter: EventEmitter<any> = new EventEmitter<any>();

    public toggleDashboardMenu(): void {
        this.dashboardMenuToggleEventEmitter.emit();
    }

    public subscribe(next: () => void): void {
        this.dashboardMenuToggleEventEmitter.subscribe(next);
    }
}