Angular 可观察属性 - 最佳实践

Question

我想知道在 Angular 4+ 中实现可观察属性的最佳实践。

文档显示了 Subject<x> 的解决方案和 Observeable<x> :
https://angular.io/guide/component-interaction

但我想要的只是服务中的一个属性，我可以绑定(bind)到几个组件并最终得到如下内容:

  public _foobar: any;

  @Input()
  public set foobar(val: any) {
    this._foobar = val;
    this.foobarChange.emit(val);
  }

  public get foobar(): any {
    return this._foobar;
  }

  @Output()
  public foobarChange: EventEmitter<any> = new EventEmitter<any>();

以及与 [(ngModel)]="service.foobar" 的绑定(bind)效果很好。

现在的问题是:

这是不好的做法吗？

为什么？或者为什么它没有显示在这样的文档中。

在主题/可观察方法上有什么更好的？

我只是感到困惑，并确定我是否可以依靠这一点。

亲切的问候
格雷戈尔

编辑:

那么它更容易忽略getter/setter(我只在我的特定情况下需要它)但它也可以正常工作:

@Input() foobar: any;
@Output() foobarChange = new EventEmitter<any>();

Answer 1

在父组件和子组件之间共享数据的最佳实践使用 @Input和 @Output

当您需要使用服务进行共享时。您需要使用 Subject或 BehaviorSubject

服务示例

@Injectable()
export class MyService {
  private data: BehaviorSubject<MyData> = new BehaviorSubject(null);

  getData(): Observable<MyData> {
    return this.data;
  }

  setData(d: MyData): void {
    this.data.next(d);
  }
}

在组件中使用

public data: Observable<MyData>;

constructor(private myService: MyService) {}

ngOnInit() {
   this.data = this.myService.getData();
}

在模板中使用

<div>{{data|async}}</div>