修改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!'});
}
无论您在通知组件上的哪个视图,这个想法仍然可见,并且不会直接绑定到任何一个视图。如果任何组件需要显示的东西,它可以
我将此父控制器中的所有ts代码复制到新的测试父组件中,无法重现错误,因此导致组件路由器出现问题。
特别是一个视图(app-page-view)在init上发出一个动作,它会更新商店中的通知消息属性。这会导致错误,其中只有父组件的直父组件不会。