角 - [（ngModel）]对[ngModel]对（ngModel）

我目前明白[(ngModel)]="expression"是双向从组件绑定，以查看，反之亦然。我也明白，[ngModel]="expression"是单向绑定（我相信从组件查看？）。然后有可能(ngModel)="expression"。我主要是困惑，[ngModel] VS (ngModel)之间的差异。有人能解释一下吗？角 - [（ngModel）]对[ngModel]对（ngModel）

编辑：与玩弄，并审查通过@Rohan Fating给出的文档片段后，我意识到，像(ngModel)应该采取一个声明，而不是表达。话虽如此，是否会有适当的时间来使用像(ngModel)之类的东西，或者甚至会在任何情况下工作？

来源

2017-09-08 mbucks

它的单向绑定去其他方式 – Plog

嘿，有什么不清楚[我的回答]（https://stackoverflow.com/a/46123215/2545680）？ –

不知道，谢谢你的解释。这正是我想知道的！ – mbucks

此语法：

[(ngModel)]="expression"

是由编译器解开成

[ngModel]="expression" (ngModelChanged)="expression=$event"

这意味着：

有施加到元件（输入）一个ngModel指令
通过ngModel结合本ngModel指令采用的expression参数
有一个输出（事件）ngModelChanged

现在你可以看到[ngModel]部分总是有它，你会注意到同步值下降。

当您指定(ngModel)="c()"时会发生什么很有趣。通常，(...)语法适用于事件。因此，我们确实角度识别出这事件，并创建在component view factory适当的听众：

function (_v, en, $event) { 
    var ad = true; 
    var _co = _v.component; 
    ... 
    if (('ngModel' === en)) { 
     var pd_4 = (_co.c() !== false); 
     ad = (pd_4 && ad); 
    } 
    return ad; 
}

然而，所有(...)元素也被解析为属性，所以它会在ngModel指令选择匹配：

selector: '[ngModel]:not([formControlName]):not([formControl])'

所以Angular也会初始化ngModel指令类作为指令。但是，由于它没有通过[...]语法定义的任何输入绑定，因此在更改检测期间将跳过此伪指令。而且因为ngModel的事件ngModel指令没有被定义，所以使用(ngModel)将没有副作用并且是没有意义的。

来源

2017-09-08 19:15:30

在角[(是信令双向数据绑定。理论上你只能绑定到一个事件（(ngModel)）或一个值（[ngModel]）。这使您能够以不同于即将发生的变化的方式处理变化。有了Angular 2，你就拥有了这种灵活性。

您需要ngModelChange事件和更新值，像我一样下面

Plunker链接：https://plnkr.co/edit/RZMgM69doSHGBG1l16Qf?p=preview

@Component({ 
    selector: 'my-app', 
    template: ` 
    <div> 
    <input [ngModel]='value' (ngModelChange)='setModel($event)'/> 
     <h2>Hello {{name}}</h2> 
    </div> 
    `, 
}) 
export class App { 
    name:string; 
    value: string = ''; 
    constructor() { 
    this.name = `Angular! v${VERSION.full}` 
    } 

    setModel(value) { 
    this.value = value; 
    } 

}

来源

2017-09-08 16:21:07

那么'（ngModel）'会被认为是一个事件绑定？意思是用户输入的数据，我想读取他们输入的内容？而如果我使用'[ngModel]'，我只想改变用户看到的值，但它们不能影响该值？ – mbucks

添加了屏幕快照，你可以参考这个链接angular.io ::: https://angular.io/guide/template-syntax#binding-syntax-an-overview –

经过测试出'（ngModel）=“表达式” “我意识到它不会将输入值添加到我的组件中的模型中。这是因为'ngModel'不被视为一个事件？ – mbucks

[（ngModel）]是双向绑定（NgModel）是一种方式结合以部件 [ngModel]是查看单程结合成分

来源

2017-09-08 16:34:14

我编辑了我上面的问题。我尝试使用'（ngModel）=“exampleObj.foo”'，但意识到它不像我期望的那样绑定到组件上的对象。 – mbucks

角 - [（ngModel）]对[ngModel]对（ngModel）

回答

相关问题