Angular 4指令如何侦听注入服务中属性的更改

我正在使用Angular 4构建一个应用程序，我有一个具有以下模板的组件：

<input
    [value]="myService.myValue"
    >

我需要添加一个指令（或其他什么）来监听myValue的更改，并更改输入文本的颜色

我怎么做？有什么想法吗

---

谢谢

您可以使用ngClass或ngStyle，如下所示

<input [value]="myService.myValue" 
       [ngStyle]="{'color': myService.myValue === 1 ? 'red' : 'blue'}">

检查这个plnkr

---

创建一个共享服务，这样当

myValue

发生变化时，您就可以收听它并应用您想要的任何逻辑

服务：

@Injectable()
export class MyService {
    updateMyValue$: Observable<any>;

    private updateMyValueSubject = new Subject<any>();

    constructor() {
        this.updateMyValue$ = this.updateMyValueSubject.asObservable();
    }

    updateVal(newVal) {
        this.updateMyValueSubject.next(newVal);
    }
}

this.myService.updateVal('new value');

this.myService.updateMyValue$.subscribe(
        (newVal) => {
              this.inputValue = newVal; // I called `inputValue` to the variable that will contain the value of the input. It should be initialized.
              // Here we can apply our own logic such as change color, hide some DOM elements or whatever we need to do
        }
    );

侦听值更改的组件：

@Injectable()
export class MyService {
    updateMyValue$: Observable<any>;

    private updateMyValueSubject = new Subject<any>();

    constructor() {
        this.updateMyValue$ = this.updateMyValueSubject.asObservable();
    }

    updateVal(newVal) {
        this.updateMyValueSubject.next(newVal);
    }
}

this.myService.updateVal('new value');

this.myService.updateMyValue$.subscribe(
        (newVal) => {
              this.inputValue = newVal; // I called `inputValue` to the variable that will contain the value of the input. It should be initialized.
              // Here we can apply our own logic such as change color, hide some DOM elements or whatever we need to do
        }
    );

说明：

@Injectable()
export class MyService {
    updateMyValue$: Observable<any>;

    private updateMyValueSubject = new Subject<any>();

    constructor() {
        this.updateMyValue$ = this.updateMyValueSubject.asObservable();
    }

    updateVal(newVal) {
        this.updateMyValueSubject.next(newVal);
    }
}

this.myService.updateVal('new value');

this.myService.updateMyValue$.subscribe(
        (newVal) => {
              this.inputValue = newVal; // I called `inputValue` to the variable that will contain the value of the input. It should be initialized.
              // Here we can apply our own logic such as change color, hide some DOM elements or whatever we need to do
        }
    );

第一个组件是向服务发送新值，在我们的例子中是“新值”

第二个组件订阅了此

主题

，一旦触发

next（）

，它将接收新数据。换句话说，此组件正在侦听

updateVal（）

函数，一旦触发，它将接收数据

这是一种在组件之间进行通信的非常可靠和实用的方法。

我找到了一个解决方案：

<input [myDirective]="myService.parameter" myServiceValue="{{myService.value}}" ... >


@Directive({
  selector: '[myDirective]'
})
export class parameterDirective implements OnInit, OnChanges {
  @Input('myDirective') parameter: parameter;
  @Input() myServiceValue: string;

  constructor(private el: ElementRef, private renderer: Renderer) {
  }

  ngOnInit(): void {
  }

  ngOnChanges(changes: SimpleChanges): void {
    switch (this.parameter) {
      case parameter.EnumValue:
        this.renderer.setElementClass(this.el.nativeElement, "my-class", changes.myServiceValue.currentValue > 100);
        break;
      default:
    }

  }
}

@指示({
选择器：“[myDirective]”
})
导出类参数指令实现OnInit、OnChanges{
@输入（'myDirective'）参数：参数；
@Input（）myServiceValue:字符串；
构造函数（私有el:ElementRef，私有呈现器：呈现器）{
}
ngOnInit（）：void{
}
ngOnChanges（更改：SimpleChanges）：无效{
开关（此参数）{
案例参数.EnumValue：
this.renderer.setElementClass（this.el.nativeElement，“我的类”，changes.myServiceValue.currentValue>100）；
打破
违约：
}
}
}

一个主题对于你所谈论的内容来说是太过分了。一般来说，反应性主题应该少用

您可以通过一个简单的

get

accessor实现您想要的功能

export class MyService {
  myValue_: string;
  get myValue() {
    return this.myValue_;
  }
}

---

如果您希望值也向另一个方向流动，您可以添加

集

访问器，尽管这是最好避免的，因为在服务类中有一个视图会有点麻烦。

为什么不在服务中使用

get

访问器属性？这将是非常简单的，它的工作。