通过返回函数在组件中绑定服务变量答案

【问题标题】：Binding a service variable in component through return functions通过返回函数在组件中绑定服务变量
【发布时间】：2018-05-16 09:27:56
【问题描述】：

我想将带有 ngModel（2 路绑定）的服务变量绑定到组件输入。因此，我使用简单的返回函数来返回服务变量（这是从服务中获取正确变量所必需的）。

但如果我想运行此代码，我会收到以下错误：

Template parse errors:
Parser Error: Unexpected token '=' at column 10 in [getName()=$event] in ng:///AppModule/HelloComponent.html@2:9 ("
{{nameService.name}}

你好，在我的案例中，它是更复杂的例子。为了简化这一点，我做了以下示例和演示：https://stackblitz.com/edit/angular-hwgoux?file=src%2Fapp%2Fhello.component.ts

服务：

import { Injectable } from '@angular/core';

@Injectable()
export class NameService {
  name:string="Hello World!";
  constructor() { }
  getName(){return this.name};
}

组件：

import { Component, Input } from '@angular/core';
import { NameService} from './name.service';

@Component({
  selector: 'hello',
  template: `
  {{nameService.name}}
  <input [(ngModel)]="getName()">`
})
export class HelloComponent  {
  @Input() name: string;
  constructor(private nameService:NameService){
  }
  getName(){
    return this.nameService.getName();
  }
}

【问题讨论】：

标签： angular angular5

【解决方案1】：

更改您的模板以按以下方式处理双向数据绑定：

<input [ngModel]=getName() (ngModelChange)="setName($event)">

setName 是您的服务变量的设置器。

我分叉了你的 stackblitz 来展示你想要实现的简化示例：Demo

【讨论】：

这里也一样。它不会引发错误，但服务变量没有更新。（本地“名称”变量令人讨厌并从 SB 自动生成。我从演示中删除了它。
那么当用户在输入中输入内容时，您需要更新服务中的变量吗？
是的。我想使用 ngModel。（我知道 ngModelChange 和 setter 是一种可能的解决方案）
我修改了答案，看看吧