Question

我正在尝试从其他组件更改app.component.html样式。我是我的app.component.html我有一个我正在使用一个具有很多属性的对象。

当从component2单击按钮并调用toggleLayout（）时，this.Data.xmldata.uiStyle [0] ['$'] ['styleForUI'] =“styleLayout2”;将更改共享变量，但app.component不知道共享变量何时更改。

这个过程是否过于间接，我是否应该尝试从外部调用app.component.ts中的方法？

Answer 1

如果可以的话，你应该避免直接调用组件的方法来减少耦合。您可以使用基于observable的共享服务。

<强>服务

import {Injectable} from '@angular/core';
import {Observable, Subject} from "rxjs";


@Injectable()
export class MessageService
{
  private mySubject: Subject<any> = new Subject<any>();
  public readonly stylesChanged$: Observable<any> = this.mySubject.asObservable();


  brodcastStylesChanged(styles)
  {
    this.mySubject.next(styles );
  }
}

<强> COMPONENT2

this.messageService.brodcastStylesChanged(styles);

<强> COMPONENT1

this.messageService.stylesChanged$.subscribe(styles=> {
    this.styles= styles;
});

更改角度为2

1 个答案: