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

Toggle property in parent Component from Child Component in Angular2 (similar to $emit in AngularJS)

我目前正在自学 Angular2,我有一个实际问题可以很容易地在 AngularJS 中纠正,但目前我正在通过示例寻找解决方案 Angular2。无论如何,我有一个名为 App 的顶级组件,在该组件中我有一个应用 css class 的 属性,这是我的 HTML用作组件模板 - 您可以看到我希望使用 ngClass 应用 css class 的位置。 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>

这是应用程序的组件代码(这里看的不多...)

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()">&#9776;</button>
</div>

在 AngularJS 中,我会在 toggleMenu 函数上有一个 $scope.$emit,在父函数中我会有一个 $scope.$on 来监听事件。我目前正在 Angular2 中阅读有关 EventEmitters 的内容,但是如果有人能快速 explanation/example 我将不胜感激,尤其是因为我认为这是 [=41 的一项常见/实用的日常任务=] 开发人员。

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

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

您可以使用双向绑定。

<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);
      }
}