Question

我是Angular（6岁以上）的新手，仍然可以在其奇妙且经常令人困惑的环境中找到自己的路。最近让我烦恼的一件事是重构一些要提取数据class InitFirebaseListeners extends React.Component { notificationsToProcess = []; state = { appState: AppState.currentState, } componentWillMount() { AppState.addEventListener('change', this.handleAppStateChange); this.startFirebaseListeners(); } handleAppStateChange = (nextAppState) => { const { appState } = this.state; if ( appState.match(/inactive|background/) && nextAppState === 'active' ) { const { myReduxAction } = this.props; while (let msgId = this.notificationsToProcess.shift()) { myReduxAction(msgId); } } this.setState({ appState: nextAppState }); }; startFirebaseListeners = async () => { this.notificationDisplayedListener = firebase.notifications().onNotificationDisplayed((notification) => { const { _data: { type, message: messageId } } = notification; this.notificationsToProcess.push(messageId); }); } render() { return null; } }的组件，以允许它们在任何OnInit()属性发生变化时都重新获取数据。这涉及使所有@Input()属性都是可观察的。

我知道可以使用@Input()处理程序来处理此问题，但是由于其类型松散，它看起来非常脆弱，难以维护和扩展。

由于要在组件定义中进行大量假设，因此重构现有组件既困难又耗时，但是一旦我开始使用它，我就意识到由于可伸缩性和可扩展性，将Observables用于任何事物都更简单。

在该练习之后我决定，它将使所有NgOnChanges()变量在将来默认情况下都是可观察的，因为这似乎鼓励了良好的做法，并使进一步扩展等变得更加容易。

大家对此有何看法？这是进入的好模式吗？为什么和为什么不呢？我认为与使用Observable模式相关的轻微开销是否超过了可维护性/等？

谢谢！

Answer 1

在我看来，仅听取更改即可对所有输入进行观察，这实在是太过分了。处理@Input更改的一种方法是为属性设置setter方法。

public _prop1: any;

@Input() set prop1(value: any) {

   this._prop1 = value || {};

   this.fetchdata();
}

public _prop2: any;

@Input() set prop2(value: any) {

   this._prop2 = value || {};

   this.fetchdata();
}

public ngOnInit() {

   this.fetchdata();
}

public fetchdata() {

  // Fetch data only when both the properties are available
  if(!this._prop1 || !this._prop2) {
     return;
  }
  // fetch data
}

这样，您将在属性更改时以及在Init阶段获取数据。

这只是设计组件的一种方法，以避免可观察到的输入更改。还有其他方法。

Answer 2

我通常使用的模式是容器组件具有可观察的属性，并通过异步管道将其传递给子组件。

data$ = this.dataService.data$;

并在视图中

<child-component [data]="data$ | async"></child-component>

或者我将其包装在带有视图变量的ngIf中

<ng-container *ngIf="data$ | async as data">
    <child-component [data]="data"></child-component>
</ng-container>

我在这里https://medium.com/@adrianbrand/angular-state-management-with-rxcache-468a865fc3fb

的状态管理库中的一篇文章中介绍了这种模式。

Angular 6+应该可以观察所有@Inputs吗？

2 个答案: