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

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

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 2

执行此操作的一种方法是让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

另一种方法是让服务跟踪导航栏状态。这将是一个非常简单的服务，但需要使用主题。主题类似于事件，因此您的Navbar会调用该服务来发出切换，并且SideBar会订阅该服务并将切换推送到它。

希望这有意义，随意提问！

Answer 3

您需要创建一个新服务。例如，如果函数isOpened为true，则在两个组件和hide / show sidenav之间共享。您还可以在服务中创建一个EventEmitter并在sidenav conmponent中订阅它。

Answer 4

您可以先添加输出以获取事件：先导入它们：

scope.$eval(attrs.mvEnter, {$event: event});

之后在课堂上：

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

在toogle功能中：

@Output() sidenavToggle = new EventEmitter();

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

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

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);
    }
}

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

5 个答案: