在切换中Angular2从子组件的父组件属性（类似$发出的AngularJS） [英] Toggle property in parent Component from Child Component in Angular2 (similar to $emit in AngularJS)

问题描述

目前，我正在自学Angular2，我有一个很容易在AngularJS整顿，但目前我期待通过实例来找到Angular2解决一个实际问题。无论如何，我有一个叫做顶级组件应用，但该组件中我有一个应用CSS类，这是我的HTML作为组件模板的属性 - 你能看到我想使用 ngClass 应用CSS类。在 showMenu 值只是一个布尔值。

I'm currently teaching myself Angular2 and I have a practical problem that would be easy to rectify in AngularJS but currently I'm looking through examples to find a solution with Angular2. Anyway, I have a top level component called App and within that component I have a property that applies a css class, here is my HTML that is used as the component template - you can see where I wish to apply the css class using ngClass. The showMenu value is just a boolean.

<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>

下面是组件code为App（不多看这里......）

Here is the Component Code for App (not much to see here...)

export class App {

    showMenu: boolean = false;
    constructor() {
    }
    // I need to listen for the toggle somehow?
    toggleMenu():void {
        this.showMenu = !this.showMenu;
    }

}

现在你可以看到我有一个孩子组件与选择顶部导航。此组件 TopNavigation 有一个按钮的方法，我想在父/顶级切换 showMenu 的价值级元件。这里是我的code到目前为止（只是小摘录）

Now you can see I have a child component with the selector top-navigation. This component TopNavigation has a method on a button that I wish to toggle the value of showMenu in the parent / top-level component. Here's my code so far (just small extracts)

export class TopNavigation {

          constructor() {
            // Things happening here
          }

          toggleMenu():void {
            // I want to toggle the parent property by somekind of $emit
          }
    }

下面是该组件的HTML模板（不是全部）。

here is the template HTML (not all) for the Component.

<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 功能，在父我会有一个 $范围。$关于来监听的事件。我目前在Angular2阅读 EventEmitters 然而，如果任何人有一个快速的解释/例子，我将是最AP preciative特别是因为我觉得这是一种常见的/实用日常任务角开发商。

In AngularJS I would have an $scope.$emit on the toggleMenu function and in the parent I would have a $scope.$on to listen for the event. I'm currently reading about EventEmitters in Angular2 however if anyone has a quick explanation/example I would be most appreciative especially as I think this is a common / practical everyday task for Angular developers.

推荐答案

我可以利用共享服务定义的 EventEmitter 属性。你的应用组件将认购上时，相应的事件触发由 TopNavigation 组件就被通知。

I could leverage a shared service that define an EventEmitter property. Your App component will subscribe on it to be notified when the corresponding event is trigger by the TopNavigation component.

• 共享服务

• Shared service

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

不要忘了来定义自举功能对应的供应商能够共享相同的服务实例，为整个应用程序：`引导程序（App [MenuService]）;

Don't forget to define the corresponding provider in the boostrap function to be able to share the same instance of the service for the whole application: `bootstrap(App, [ MenuService ]);

应用组件

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

有关详细信息，请参阅此问题：

See this question for more details:

• Delegation: EventEmitter或可观察到的Angular2

• Delegation: EventEmitter or Observable in Angular2

这篇关于在切换中Angular2从子组件的父组件属性（类似$发出的AngularJS）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！