我目前正在自学Angular2，并且遇到了一个实际问题，可以在AngularJS中轻松解决，但是目前我正在通过示例查找Angular2的解决方案。无论如何，我有一个称为的顶级组件，App并且在该组件内有一个应用css类的属性，这是用作组件模板的HTML，您可以使用看到我希望将css类应用到的位置ngClass。该showMenu值只是一个布尔值。
<div class="navigation" role="navigation">
<ul>
<li><a [routerLink]="['Home]">Home</a></li>
<li><a [routerLink]="['Mail']">Mail</a></li>
<li><a [routerLink]="['Friends']">Friends</a></li>
<li><a [routerLink]="['Games']">Games</a></li>
</ul>
</div>
<!-- below is where I wish to toggle the class -->
<div class="site-wrap" [ngClass]="{'slide-right': showMenu}">
<div class="container-fluid">
<div class="row nav">
<top-navigation></top-navigation>
</div>
</div>
<div class="container-fluid content-gradient">
<div class="row">
<div class="col-md-10">
<router-outlet></router-outlet>
</div>
<div class="col-md-2">
<contacts-list></contacts-list>
</div>
</div>
</div>
<div class="container-fluid footer">
<footer-navigation></footer-navigation>
</div>
</div>
这是App的组件代码（在这里看不到太多...）
export class App {
showMenu: boolean = false;
constructor() {
}
// I need to listen for the toggle somehow?
toggleMenu():void {
this.showMenu = !this.showMenu;
}
}
现在您可以看到带有选择器的子组件top-navigation。这个组件TopNavigation在按钮上有一个方法，我希望showMenu在上一级/顶层组件中切换它的值。到目前为止，这是我的代码（只是一些小片段）
export class TopNavigation {
constructor() {
// Things happening here
}
toggleMenu():void {
// I want to toggle the parent property by somekind of $emit
}
}
这是该组件的模板HTML（并非全部）。
<div class="col-xs-2 col-sm-1 hidden-md hidden-lg hamburger-menu">
<button class="btn btn-default" (click)="toggleMenu()">☰</button>
</div>
在AngularJS中，我$scope.$emit在toggleMenu函数上有一个，在父级中，我$scope.$on在侦听该事件。我目前正在EventEmittersAngular2中阅读有关内容，但是如果有人有一个快速的解释/示例，我将非常感激，尤其是因为我认为这对Angular开发人员来说是一项日常工作。
我可以利用定义EventEmitter属性的共享服务。App当TopNavigation组件触发相应的事件时，您的组件将对其进行订阅以得到通知。
共享服务
@Injectable()
export class MenuService {
showMenuEvent: EventEmitter = new EventEmitter();
}
不要忘记在boostrap函数中定义相应的提供程序，以便能够为整个应用程序共享服务的相同实例：`bootstrap（App，[MenuService]）;
App 零件
@Component({ ... })
export class App {
showMenu: boolean = false;
constructor(menuService: MenuService) {
menuService.showMenuEvent.subscribe(
(showMenu) => {
this.showMenu = !this.showMenu;
}
);
}
}
TopNavigation 零件：
export class TopNavigation {
constructor(private menuService: MenuService) {
// Things happening here
}
toggleMenu():void {
this.showMenu = this.showMenu;
this.menuService.showMenuEvent.emit(this.showMenu);
}
}
有关更多详细信息，请参见此问题：
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句