英文:
Interpolation in Angular preventing Reducer to be called from Action
问题
我正在开发一个使用ngrx进行状态管理的Angular应用程序。
我将一个子组件引入到父组件中，并注意到现有的ExistingAction的reducer没有被调用。
ParentComponent.html
...
<childComponent> </childComponent>
...
ParentComponent.ts
export class ParentComponent {
....
this.store.dispatch(new ExistingAction());
...
}
ChildComponent.ts
export class ChildComponent {
displayString: any;
subscription$: Subscription;
....
ngOnInit() {
this.subscription$ = this.service.subscribe((content) => {
this.displayString = content;
}
ngOnDestroy()
{
this.subscription.unsubscribe();
}
....
}
ChildComponent.html
<label class="display">
Sample : {{displayString['SelectSample']}}
</label>
服务的输出结果是JSON，如下：'SelectSample' : 'This is text'
尽管ChildComponent.html中的上述代码在屏幕上打印文本，并且控制台中没有错误，但我发现由于引入ChildComponent，父组件中Action的Reducer函数停止被调用。
经过一系列的试验和错误，我在ChildComponent中进行了以下更改，并出奇不意地Reducer再次被调用，流程正常工作。
这是我所做的更改。
a)
<label class="display">
Sample : {{displayString}}
</label>
b)
this.subscription$ = this.service.subscribe((content) => {
this.displayString = content['SelectSample'];
}
所以我的问题是，为什么像这样的插值{{displayString['SelectSample']}}使用会阻止Reducer被调用？插值和ngrx的Reducers之间有什么联系？我无法在任何地方找到答案。
WorkingCode
ChildComponent.ts
export class ChildComponent
{
displayString: any;
subscription$: Subscription;
....
ngOnInit()
{
this.subscription$ = this.service.subscribe((content) => {
this.displayString = content['SelectSample'];
}
ngOnDestroy()
{
this.subscription.unsubscribe();
}
....
}
ChildComponent.html
<label class="display">
Sample : {{displayString}}
</label>
英文:
I am working on an Angular app which uses ngrx for State management .
I introduced a child component to the parent and noticed that reducer from ExistingAction was not getting invoked (ExistingAction) .
ParentComponent.html
...
<childComponent> </childComponent>
...
ParentComponent.ts
export class ParentComponent
{
....
this.store.dispatch(new ExistingAction());
...
}
ChildComponent.ts
export class ChildComponent
{
displayString : any ;
subscription$ : subscription;
....
ngOninit()
{
this.subscription$ = this.service.subscribe((content) => {
this.displayString= content;
}
}
ngOnDestroy()
{
this.subscription.unsubscribe();
}
....
}
ChildComponent.html
<label class="display">
Sample : {{displayString['SelectSample']}}
</label>
Output from the service is json like 'SelectSample' : 'This is text'
Although the above code in ChildComponent.html prints text on the screen and no errors found in console , I found that the Reducer fn from the Action in ParentComponent was stopped being called because of introduction of ChildComponent.
After a series of trial and error I made the following change in ChildComponent and surprisingly the Reducer was invoked again and the flow worked normally .
Here is what I changed.
a)
<label class="display">
Sample : {{displayString}}
</label>
-> html changes
b)
this.subscription$ = this.service.subscribe((content) => {
this.displayString= content[SelectSample];
}
-> .ts changes
So my question why is usage of interpolation like this {{displayString['SelectSample']}} , preventing the Reducer from being called ? whats the connection between interpolation and ngrx Reducers? I could not find answer anywhere for this
WorkingCode
ChildComponent.ts
export class ChildComponent
{
displayString : any ;
subscription$ : subscription;
....
ngOninit()
{
this.subscription$ = this.service.subscribe((content) => {
this.displayString= content[SelectSample];
}
ngOnDestroy()
{
this.subscription.unsubscribe();
}
....
}
ChildComponent.html
<label class="display">
Sample : {{displayString}}
</label>
答案1
得分: 1
I'm here to provide Chinese translations. Here's the translation of the text you provided:
这个问题很难找到根本原因，如果没有看到所有的代码（最好是一个复现）。
但是回答你的问题，插值不会影响 "NgRx 流程"。
它可能会引发错误，导致动作未分发/视图未刷新。
英文:
It's a hard to find the root cause of this without seeing all of the code (even better is a reproduction).
But to answer the question the interpolation does not impact the "NgRx flow".
It could perhaps throw an error, which results that the action is not dispatched/view is not refreshed.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论