我使用角度(最新版本)和角度材料.
有3个组成部分:
我第一次使用Angular,请告诉我,如何从另一个组件打开/关闭sidenav(在我的例子中,按钮在header.component中).
尝试了以下选项(但得到错误:TypeError:this.RightSidenavComponent.rightSidenav未定义):
header.component.html
<button mat-button (click)="toggleRightSidenav()">Toggle side nav</button>
header.component.ts
import { Component } from '@angular/core';
import { RightSidenavComponent } from '../right-sidenav/right-sidenav.component';
@Component({
selector: 'app-header',
templateUrl: './header.component.html',
styleUrls: ['./header.component.scss']
})
export class HeaderComponent {
constructor(public RightSidenavComponent:RightSidenavComponent) { }
toggleRightSidenav() {
this.RightSidenavComponent.rightSidenav.toggle();
}
}
sidenav.component.html
<mat-sidenav-container class="sidenav-container">
<mat-sidenav #sidenav mode="side" opened="true" class="sidenav"
[fixedInViewport]="true"> Sidenav </mat-sidenav>
<mat-sidenav-content>
<app-header></app-header>
<router-outlet></router-outlet>
<app-right-sidenav #rSidenav></app-right-sidenav>
</mat-sidenav-content>
</mat-sidenav-container>
sidenav.component.ts
import { Component, Directive, ViewChild } from '@angular/core';
import { RightSidenavComponent } from '../right-sidenav/right-sidenav.component'; …慢慢地掌握了 angular 2，但我在一个特定的问题上走到了尽头。
如果你有这样的安排；
<parent>
<child/>
</parent>
我可以通过使用@Input() 通知子级父级的变化，并让它监听变化。我可以通过使用 @Output() 和 EventEmitters 来通知父级子节点的变化。
我现在看到的是通知路由组件（一个在单击链接时动态加载的组件）关于主 appComponent 中发生的特定事件。见下面的例子；
<app>
<button (click)='addEntity()>Add</button>
<router-outlet></router-outlet>
</app>
我希望能够通知加载到路由器插座的组件已单击该按钮。
一个使用示例是具有多个功能（英雄/联系人/宠物等），每个功能都有自己的用于添加实体的对话框。根据选择的路由，它需要通知选择的特征组件（例如ContactComponent）显示其特定的细节组件/视图/模板（例如contact-detail.component）。
实现这一目标的最佳方法是什么？
干杯