使用 Angular 2 服务切换类

Question

我正在尝试创建一个可以使用 Angular 2 服务添加/删除类的示例。这是一个plunkr：https://plnkr.co/edit/qLzgTca6Ul4W6OpBXG7w?p=preview

我基本上在做的是点击一个按钮，我正在尝试使用服务在分布在应用程序中的不同选择器之间切换一个类：

import {Injectable} from "angular2/core";

@Injectable()
export class AppService{
    background: boolean = false; //Scrolling is on by default
}

背景标志决定背景是否应该改变：

组件A：

import {Component} from 'angular2/core';
import {AppService} from './app.service';

@Component({
    selector: "comp-a",
    template: `
      <div>
        Component A!
        <button (click)="onClick()">Click me</button>
      </div>
    `
})
export class ComponentA{

  constructor(private _appService: AppService){

  }

  onClick(){
    this._appService.background = true;
    console.log(this._appService.background);
  }
}

指令 C：

import {Directive} from 'angular2/core';
import {AppService} from './app.service';

@Directive({
    selector: "my-app",
    host: {'[class.backgroundBlue]':'_appService.background'}
})
export class DirectiveC{

  constructor(private _appService: AppService){

  }
}

应用：

import {Component} from 'angular2/core';

import {ComponentA} from './a.component';
import {ComponentB} from './b.component';
import {DirectiveC} from './c.directive';

@Component({
    selector: "my-app",
    template: `
      <div>
        App Component!
        <comp-a></comp-a>
        <comp-b></comp-b>
      </div>
    `,
    directives: [ComponentA,ComponentB,DirectiveC]
})
export class AppComponent{
}

当我点击 ComponentA 中的按钮时，ComponentB 的颜色发生了变化，但为什么它不影响 DirectiveC 的选择器？

Answer 1

您忘记将DirectiveC 添加到AppComponent 的指令列表中：

directives: [ComponentA, ComponentB, DirectiveC]

所以指令没有被应用。

看到这个 plunkr：https://plnkr.co/edit/JwskUymdNgGTRtnzuD4s?p=preview。