Typescript 从Angular2中的子组件切换父组件中的属性（类似于AngularJS中的$emit）

我目前正在自学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>

现在您可以看到我有一个子组件，带有选择器

顶部导航

。此组件

TopNavigation

在一个按钮上有一个方法，我希望在父级/顶级组件中切换

showMenu

的值。以下是我迄今为止的代码（只是一些小摘录）

下面是组件的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

，在父级中，我有一个

$scope.$on

来监听事件。我目前正在阅读Angular2中的

EventEmitter

，但是如果有人有一个快速的解释/示例，我将非常感激，特别是因为我认为这是Angular开发人员的一项常见/实用的日常任务。

我可以利用定义

EventEmitter

属性的共享服务。当

TopNavigation

组件触发相应事件时，您的

App

组件将订阅该应用程序以获得通知

• 共享服务

  @Injectable()
  export class MenuService {
    showMenuEvent: EventEmitter = new EventEmitter();
  }
  

  不要忘记在bootstrap函数中定义相应的提供者，以便能够为整个应用程序共享相同的服务实例：`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);
    }
  }
  

有关更多详细信息，请参见此问题：

---

您可以使用双向绑定

<top-navigation [(toggleMenu)]="showMenu"></top-navigation>

---

这很好，我正在阅读TopNavigation组件中的emit中的链接，但是我假设我不需要从.emit（）发送任何数据-因为我不维护该组件中的showMenu。然而，我看到了如何传递我想要的信息。另外，在我的MenuService中，我得到一个错误

泛型类型'EventEmitter'需要1个类型参数

我假设我们缺少一些东西。但你的回答正是我所需要的——我现在明白了！如果你有直接的亲子关系，我更喜欢甘特的答案。如果您需要切换多个组件的值，则使用irry的答案（但使用可观察的而不是EventEmitter）。

export class TopNavigation {
  constructor(private menuService: MenuService) {
    // Things happening here
  }

  toggleMenu():void {
    this.showMenu = this.showMenu;
    this.menuService.showMenuEvent.emit(this.showMenu);
  }
}

<top-navigation [(toggleMenu)]="showMenu"></top-navigation>

<top-navigation (toggleMenuChange)="showMenu=$event"></top-navigation>

export class TopNavigation {
      @Output() toggleMenuChange: EventEmitter = new EventEmitter();

      // for two-way binding
      @Input() toggleMenu:boolean = false;

      constructor() {
        // Things happening here
      }

      toggleMenu():void {
        this.toggleMenu = !this.toggleMenu;
        this.toggleMenu.emit(this.toggleMenu);
      }
}