typescript – 从Angular2中的子组件切换父组件中的属性(类似于A
我目前正在教自己Angular2,我有一个很容易在AngularJS中纠正的实际问题,但目前我正在通过实例查找Angular2的解决方案.无论如何,我有一个名为App的顶级组件,在该组件中我有一个应用css类的属性,这是我的
HTML用作组件模板 – 你可以看到我希望使用ngClass应用css类的位置. 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; } } 现在你可以看到我有一个带有选择器顶部导航的子组件.这个组件TopNavigation在按钮上有一个方法,我希望在父/顶级组件中切换showMenu的值.到目前为止这是我的代码(只是小提取) export class TopNavigation { constructor() { // Things happening here } toggleMenu():void { // I want to toggle the parent property by somekind of $emit } } 这是Component的模板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中,我将在toggleMenu函数上使用$scope.$emit,在父级中我将使用$scope.$on来监听事件.我目前正在阅读Angular2中的EventEmitters,但如果有人有快速解释/示例,我会非常感激,特别是因为我认为这是Angular开发人员的常见/实际日常任务. 解决方法
我可以利用定义EventEmitter属性的共享服务.您的应用程序组件将订阅它,以便在TopNavigation组件触发相应事件时收到通知.
>共享服务 @Injectable() export class MenuService { showMenuEvent: EventEmitter = new EventEmitter(); } 不要忘记在boostrap函数中定义相应的提供程序,以便能够为整个应用程序共享相同的服务实例:`bootstrap(App,[MenuService]); @Component({ ... }) export class App { showMenu: boolean = false; constructor(menuService: MenuService) { menuService.showMenuEvent.subscribe( (showMenu) => { this.showMenu = !this.showMenu; } ); } } export class TopNavigation { constructor(private menuService: MenuService) { // Things happening here } toggleMenu():void { this.showMenu = this.showMenu; this.menuService.showMenuEvent.emit(this.showMenu); } } 有关详细信息,请参阅此问题: > Delegation: EventEmitter or Observable in Angular2 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |