从Angular2中的子组件切换父组件中的属性(类似于AngularJS中的$ emit)

Question

我目前正在教自己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
          }
    }

这是Component的模板HTML(不是全部).

<div class="col-xs-2 col-sm-1  hidden-md hidden-lg hamburger-menu">
    <button class="btn btn-default" (click)="toggleMenu()">&#9776;</button>
</div>

在AngularJS中,我会$scope.$emit在toggleMenu函数上有一个函数,在父元素中我会有一个$scope.$on监听事件.我目前正在EventEmittersAngular2中阅读,但是如果有人有快速解释/示例,我会非常感激,特别是因为我认为这是Angular开发人员的常见/实际日常任务.

Answer 1

我可以利用定义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);
    }
  }
  

有关详细信息,请参阅此问题:

• 委托:Angular2中的EventEmitter或Observable