Angular двусторонняя привязка [(ngModel)] - PullRequest
Новая
       14

Angular двусторонняя привязка [(ngModel)]

0 голосов
/ 25 мая 2020

Angular Двусторонняя привязка

в любом случае мы можем иметь

[(ngModel)] -> [(propertyName)] возможно ли это об этом мне задавали в интервью ???

1 Ответ

1 голос
/ 25 мая 2020

Да, во многих случаях вы можете использовать двустороннюю привязку. В официальных документах есть множество примеров.

В тех случаях, когда у вас есть компонент с @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>

Секрет здесь между предположим, что вы хотите иметь двустороннюю привязку по размеру. Таким образом, должен быть один вход с размером имени и один выход с именем sizeChange. Это соглашение об именах гарантирует его автоматическую привязку.

...