模型绑定类似于 属性 绑定的语法
Model binding like syntax for the property binding
我正在从事 Metronic Theme's Angular 6 项目。它具有以下代码。你能告诉我 [(action)]="action"
的功能是什么吗?我知道如何绑定到输入元数据(即 @Input()
)。我们通常是这样
<m-login *ngIf="action === 'login'" [action]="action"></m-login>
但这里不一样。这就像 2 向模型绑定。但是我们通常对 [(ngModel)]="model"
使用这种语法。有什么线索吗?
auth.component.html
<m-login *ngIf="action === 'login'" [(action)]="action"></m-login>
login.ts
export class LoginComponent implements OnInit, OnDestroy {
@Output() actionChange = new Subject<string>();
@Input() action: string;
}
Can you tell me what is the functionality of [(action)]="action"
此功能称为双向数据绑定
更多信息:Two Way Binding
You often want to both display a data property and update that
property when the user makes changes.
On the element side that takes a combination of setting a specific
element property and listening for an element change event.
Angular offers a special two-way data binding syntax for this purpose,
[(x)]. The [(x)] syntax combines the brackets of property binding,
[x], with the parentheses of event binding, (x).
The two-way binding syntax is really just syntactic sugar for a
property binding and an event binding. Angular desugars the binding
into this:
如果你的 属性 名字是 action
,你只需要将它对应的 EventEmitter
命名为 actionChange
并为子组件 [(action)] = "parentProperty"
和 Angular 负责其余部分。
我正在从事 Metronic Theme's Angular 6 项目。它具有以下代码。你能告诉我 [(action)]="action"
的功能是什么吗?我知道如何绑定到输入元数据(即 @Input()
)。我们通常是这样
<m-login *ngIf="action === 'login'" [action]="action"></m-login>
但这里不一样。这就像 2 向模型绑定。但是我们通常对 [(ngModel)]="model"
使用这种语法。有什么线索吗?
auth.component.html
<m-login *ngIf="action === 'login'" [(action)]="action"></m-login>
login.ts
export class LoginComponent implements OnInit, OnDestroy {
@Output() actionChange = new Subject<string>();
@Input() action: string;
}
Can you tell me what is the functionality of [(action)]="action"
此功能称为双向数据绑定
更多信息:Two Way Binding
You often want to both display a data property and update that property when the user makes changes.
On the element side that takes a combination of setting a specific element property and listening for an element change event.
Angular offers a special two-way data binding syntax for this purpose, [(x)]. The [(x)] syntax combines the brackets of property binding, [x], with the parentheses of event binding, (x).
The two-way binding syntax is really just syntactic sugar for a property binding and an event binding. Angular desugars the binding into this:
如果你的 属性 名字是 action
,你只需要将它对应的 EventEmitter
命名为 actionChange
并为子组件 [(action)] = "parentProperty"
和 Angular 负责其余部分。