Question

修改2

由于AntonioGarcía和smnbbrv的评论，我认为我已经缩小了范围。我的一个组件（我称之为CompA）将始终触发一条消息，因此我调用了一个动作来在ngOnInit中显示该消息。我认为通知组件被视为CompA的父级，因此此时调度操作在技术上违反了Angular的单向数据流。

现在问题就变成了，这种情况下的最佳做法是什么？显示的文本与CompA相关联，因此我不希望其他组件的操作知道它，并且它是从配置中提取的，因此我无法在reducer中检索它。

现在我订阅顶级组件中的状态更改并检查该特定状态，然后调度操作以更新文本。不理想

原帖

我正在尝试构建一个通用通知组件，它接收一个字符串消息@Input并显示结果。

我正在使用Redux根据应用程序的状态存储消息，并且应该在Redux更新时更新。

家长控制器

@Component({
    selector: 'app-parent',
    template: '<app-child [message]="message$ | async">'
})
export class AppComponent implements OnInit {
    @select() message$: Observable<string>;
    // Rest of code omitted
}

儿童控制器

@Component({
  selector: 'app-child',
  template: '<div>{{message}}</div>'
})
export class AppChildComponent implements OnInit {
  @Input() message?: string;

  constructor() { }

  ngOnInit() {
  }

}

错误消息

Expression has changed after it was checked...

我在这种情况下看到的两种方法是使用输入属性设置器和ngOnChange。两者都会导致相同的错误，但为了完整起见，我是如何实现这些模式的

输入属性设置器

private _message: string;
@Input() set message(value: string) {
  this._message = value;
}
get message(): string {
  return this._message;
}

ngOnChanges

public displayMessage: string;
@Input() message: string;
ngOnChanges(data: SimpleChanges) {
  if (data.message) {
    this.displayMessage = data.message.currentValue;
  }
}

我找到了一种解决方法，将整个Observable作为参数传递，并在子组件中订阅它，但这感觉不正确。

有什么想法？我在这里做错了什么？

修改

在smnbbrv的评论之后，我决定从头开始重建应用程序，除了有问题的代码，它应该使用属性设置器。因此，我没有在上述帖子中提供足够的信息，并在此处提供更多详细信息

父组件的模板还实例化路由器组件，该组件使用ngSwitch根据应用程序状态呈现应用程序的视图。

更新了app-parent视图

<app-child [message]="message$ | async"></app-child>
<app-router></app-router>

app-router view

<div [ngSwitch]="workflowStep$ | async">
  <app-page-view *ngSwitchCase="workflowStep.PageView"></app-page-view>
  /* Other Views*/
</div>

应用页视

ngOnInit(){
  ngRedux.dispatch({type: 'appPageView_Loaded', message: 'view loaded!'});
}

无论您在通知组件上的哪个视图，这个想法仍然可见，并且不会直接绑定到任何一个视图。如果任何组件需要显示的东西，它可以

使用更新发布更改的商店值的消息发送操作
app-parent的@select变量“message $”然后更新传递给app-child的值
app-child的@Input setter更新显示的消息

我将此父控制器中的所有ts代码复制到新的测试父组件中，无法重现错误，因此导致组件路由器出现问题。

特别是一个视图（app-page-view）在init上发出一个动作，它会更新商店中的通知消息属性。这会导致错误，其中只有父组件的直父组件不会。

将Redux值传递给Angular 5中的子组件会导致Expression在检查后发生更改

0 个答案: