通过服务更新绑定组件值时出现意外结果

Question

我正在使用 Angular 4.3.6，我的项目是使用 Angular CLI 设置的。

我的问题是 component/service 互动。 I have made a plunker that demonstrates it 如果有人能解释问题所在，我会很高兴，因为我很困惑。

我有一个具有 <input type='text' [value]='labelStr'> 的组件，其中 labelStr 是该组件的属性。
我还有一项声明 BehaviourSubject 的服务。第一个组件订阅了这个主题。

当您点击该字段时，输入一些新文本然后点击离开，您输入的字符将发送到服务。在此示例中，服务仅接收输入，然后通过主题将其发回。

组件通过其订阅收到通知，并将 labelStr 属性更新为接收到的由字符串 Foo 前置的值。

大部分时间它都按预期工作 - 输入一些字符，单击退出，值更新为 Foo [your chars]。当您输入文本，单击退出然后单击返回并再次输入相同的文本时，就会出现问题。在这种情况下，价值似乎没有更新，对于我来说，我不明白为什么不更新。我真的希望这是一个非常明显的问题，我可以轻松解决。
如果我解释得不好，请大声疾呼

感谢您提供的任何帮助。

Answer 1

如果您使用 ngModel 而不是 value，问题将得到解决（在 plunker 上本地确认），因为它会自动强制 2 向绑定。这些是我所做的更改。

先导入FormsModule到app.ts,

import {FormsModule} from '@angular/forms'

@NgModule({
  imports: [ BrowserModule, FormsModule ],
  declarations: [ App, InputWidgetComponent],
  bootstrap: [ App ],

})
export class AppModule {}

在 input-widget.ts 中，将 input 的模板更改为

<input type="text" [(ngModel)]="labelStr"
    (focus)="handleFocus($event)"
    (blur)="handleBlur($event)">

希望对您有所帮助

通过服务更新绑定组件值时出现意外结果

Unexpected result when updating a bound component value via a service

angular2-services

angular