Question

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

我基本上只是点击一个按钮，我试图使用服务在应用程序中跨越不同选择器切换类：

import {Injectable} from "angular2/core";

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

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

ComponentA：

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。

使用Angular 2服务切换类

1 个答案: