angular - 类似于属性绑定的模型绑定语法

Question

我正在从事Metronic Theme 的 Angular 6项目。它有以下代码。你能告诉我什么是[(action)]="action". 我知道如何绑定到输入元数据（即@Input()）。我们通常这样做

<m-login *ngIf="action === 'login'" [action]="action"></m-login>

但这里不一样。这就像 2-way 模型绑定。但我们通常为此使用这种语法[(ngModel)]="model"。有什么线索吗？

auth.component.html

<m-login *ngIf="action === 'login'" [(action)]="action"></m-login>

登录.ts

export class LoginComponent implements OnInit, OnDestroy {

    @Output() actionChange = new Subject<string>();
    @Input() action: string;

}

score 1 · Accepted Answer

你能告诉我 [(action)]="action" 的功能是什么吗

此功能称为双向数据绑定

更多信息：双向绑定

您通常希望在用户进行更改时既显示数据属性又更新该属性。

在元素方面，它结合了设置特定元素属性和侦听元素更改事件。

为此，Angular 提供了一种特殊的双向数据绑定语法 [(x)]。[(x)] 语法将属性绑定的括号 [x] 与事件绑定的括号 (x) 组合在一起。

score 1 · Accepted Answer

双向绑定语法实际上只是属性绑定和事件绑定的语法糖。Angular 将绑定脱糖成这样：

如果您的属性名称是action，您只需将其命名为对应EventEmitter的名称actionChange并为子组件执行香蕉盒中的语法，[(action)] = "parentProperty"其余的由 Angular 处理。

2 回答 2