В настоящее время я понимаю, что [(ngModel)]="expression" является двусторонней привязкой от компонента к представлению и наоборот. Я также понимаю, что [ngModel]="expression" является односторонним связыванием (я полагаю, от компонента к представлению?). Тогда есть возможность (ngModel)="expression". Меня больше всего смущают различия между [ngModel] и (ngModel). Может кто-нибудь объяснить, пожалуйста?
РЕДАКТИРОВАТЬ . Поэкспериментировав с фрагментом документа @Rohan Fating и изучив его, я понял, что что-то вроде (ngModel) должно принимать выражение, а не выражение. При этом будет ли когда-нибудь подходящее время использовать что-то вроде (ngModel) или это сработает в любых обстоятельствах?
3 ответа
Этот синтаксис:
[(ngModel)]="expression"
Разворачивается компилятором в
[ngModel]="expression" (ngModelChanged)="expression=$event"
Что значит:
- есть директива ngModel, примененная к элементу (вход)
- эта директива ngModel через привязку ngModel принимает параметр
expression - есть выход (событие)
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) не будет иметь побочных эффектов и не имеет смысла.
[( в 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;
}
}
[(ngModel)] - это двухстороннее связывание (NgModel) - это одностороннее представление привязки к компоненту [ngModel] - это одностороннее связывание компонента для просмотра
En Español