Angular可观察属性 - 最佳实践

Question

Angular可观察属性 - 最佳实践

5

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

文档展示了一种使用Subject<x>和Observeable<x>的解决方案： https://angular.io/guide/component-interaction

但是我只是想要在一个服务中有一个属性，我可以将其绑定到多个组件，并且最终结果类似于：

  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" 的效果非常好。

现在的问题是:

这是不好的实践吗？
为什么？或者为什么它没有在文档中像这样显示。
在这个主题/可观察的方法上有更好的选择吗？

我很困惑，不确定是否可以依赖它。

最好的祝福格雷戈尔

编辑：

忽略 getter / setter 更容易（我只需要在我的特定情况下使用它），但它也能很好地工作：

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

- Gregor Sklorz

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Kliment Ru · Accepted Answer

在父子组件之间共享数据的最佳实践是使用@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>