Question

我想知道在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>();

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>

角度可观察属性-最佳做法

1 个答案: