Angular 双向绑定 [(ngModel)]

Question

Angular 双向绑定

无论如何我们都可以

[(ngModel)] --> [(propertyName)] 这可能吗这在面试中被问过？？？

Answer 1

是的，在很多情况下可以使用双向绑定。 official docs.

中有很多例子

如果您的组件带有 @Input 和 @Output，您可以使用它。

如果这是您的组件：

src/app/sizer.component.ts

import { Component, Input, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'app-sizer',
  templateUrl: './sizer.component.html',
  styleUrls: ['./sizer.component.css']
})
export class SizerComponent {


  @Input()  size: number | string;
  @Output() sizeChange = new EventEmitter<number>();

  dec() { this.resize(-1); }
  inc() { this.resize(+1); }

  resize(delta: number) {
    this.size = Math.min(40, Math.max(8, +this.size + delta));
    this.sizeChange.emit(this.size);
  }

}

src/app/sizer.component.html

<div>
  <button (click)="dec()" title="smaller">-</button>
  <button (click)="inc()" title="bigger">+</button>
  <label [style.font-size.px]="size">FontSize: {{size}}px</label>
</div>

您可以按如下方式使用：

<app-sizer [(size)]="fontSizePx"></app-sizer>
<div [style.font-size.px]="fontSizePx">Resizable Text</div>

这里的秘诀在于假设您想对大小进行两种方式的绑定。因此，应该有一个名称为 size 的输入和一个名称为 sizeChange 的输出。此命名约定确保自动绑定它。

Angular 双向绑定 [(ngModel)]

Angular two way binding [(ngModel)]

angular

two-way-binding