В настоящее время я понимаю, что [(ngModel)]="expression" является двусторонней привязкой от компонента к представлению и наоборот. Я также понимаю, что [ngModel]="expression" является односторонним связыванием (я полагаю, от компонента к представлению?). Тогда есть возможность (ngModel)="expression". Меня больше всего смущают различия между [ngModel] и (ngModel). Может кто-нибудь объяснить, пожалуйста?

РЕДАКТИРОВАТЬ . Поэкспериментировав с фрагментом документа @Rohan Fating и изучив его, я понял, что что-то вроде (ngModel) должно принимать выражение, а не выражение. При этом будет ли когда-нибудь подходящее время использовать что-то вроде (ngModel) или это сработает в любых обстоятельствах?

6
mbucks 8 Сен 2017 в 19:16

3 ответа

Лучший ответ

Этот синтаксис:

[(ngModel)]="expression"

Разворачивается компилятором в

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

Что значит:

  1. есть директива ngModel, примененная к элементу (вход)
  2. эта директива ngModel через привязку ngModel принимает параметр expression
  3. есть выход (событие) ngModelChanged

Теперь вы можете видеть, что всегда присутствует [ngModel] часть, которая, как вы заметили, будет синхронизировать значения вниз.

Что происходит, когда вы указываете (ngModel)="c()", интересно. Обычно синтаксис (...) предназначен для событий. Таким образом, Angular распознает это как событие и создает соответствующего слушателя в фабрика представления компонентов:

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) не будет иметь побочных эффектов и не имеет смысла.

13
Max Koretskyi 10 Сен 2017 в 14:59

введите описание изображения здесь [( в Angular сигнализирует о двусторонней привязке данных. Теоретически вы можете привязать только к событию ((ngModel)) или к значению ([ngModel]). Это дает вам возможность обрабатывать изменения, происходящие не так, как предстоящие изменения. С Angular 2 у вас есть такая гибкость.

Вам нужно событие ngModelChange и обновить значение, как я сделал ниже

Плункерная ссылка: 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;
  }

}
5
Rohan Fating 8 Сен 2017 в 19:31

[(ngModel)] - это двухстороннее связывание (NgModel) - это одностороннее представление привязки к компоненту [ngModel] - это одностороннее связывание компонента для просмотра

0
Aniruddha Das 9 Сен 2017 в 00:05