data-binding - navigationend - title angular 6
Enlace de datos bidireccional Angular2 (7)
Sé que Angular2 no tiene enlace de datos de doble vía, pero ¿hay alguna manera de imitar el comportamiento de enlace de datos de dos vías de Angular1.x?
Ahora puede simplemente hacer esto usando ngModel usando la siguiente sintaxis:
<input [(ngModel)]="myProp" />
La combinación de los corchetes y los soportes redondos significa "unión de dos vías".
Por favor vea el plunk here
Aquí hay un simple desplumador que demuestra los enfoques de acción de una vía, de dos vías y de eventos de acuerdo con Angular2 2.0.0-beta.17
Evento de dos vías y propiedad
<input [(ngModel)]="name" />
Propiedad unidireccional
<input [value]="name" />
Evento conducido
<input (input)="name=$event.target.value">
Podemos cavar documentos angulares para more
Es simple, prueba esto;
<input [(ngModel)]="property" placeholder="property Value"/>
<h1>{{property}}</h1>
Hay otra manera de engañar a Angular2 en enlace de dos vías. No pase una propiedad sino un objeto en el componente. Si pasa un objeto a través de un enlace unidireccional, todas sus propiedades son de hecho un enlace bidireccional. Hace que el componente sea menos versátil, ya que necesita conocer el objeto, pero en muchos casos sigue siendo útil.
Tengo un componente que se parece a esto:
import { Component, Input } from "@angular/core";
import { NgSwitch, NgSwitchWhen, NgSwitchDefault } from "@angular/common";
export class Movie
{
public Title: string;
public Rating: number;
public Seen: boolean;
}
@Component
({
selector: "hh-image-checkbox",
template: `
<div [ngSwitch]="movie.Seen">
<div *ngSwitchWhen="true">
<img src="/Content/res/CheckTrue.png" (click)="onClick()">
</div>
<div *ngSwitchDefault>
<img src="/Content/res/CheckFalse.png" (click)="onClick()">
</div>
</div>
`,
directives: [NgSwitch, NgSwitchWhen, NgSwitchDefault]
})
export class ImageCheckboxComponent
{
@Input() movie: Movie;
public onClick()
{
this.movie.Seen = !this.movie.Seen;
}
}
Se invoca así:
<hh-image-checkbox [movie]="movie"></hh-image-checkbox>
El objeto de la película en sí está enlazado en un solo sentido, pero todas sus propiedades se pueden usar para el enlace en ambos sentidos.
Puede hacer esto adjuntando a los eventos en el campo de entrada y actualizando el valor interno como se hace en este ejemplo:
http://plnkr.co/edit/lOFzuWtUMq1hCnrm9tGA?p=preview
Cree un componente que tenga un atributo interno que contenga la etiqueta this.label y una etiqueta de this.label devolución de llamada que espere un objeto de evento
@Component({
selector: ''app'',
templateUrl: ''bound.html''
})
class App {
label: string;
constructor() {
this.label = ''default label''
}
changeLabel(event) {
this.label = event.target.value;
}
}
bootstrap(App);
Cree su plantilla y adjunte la devolución de llamada al evento apropiado (puede adjuntarlo al evento de keypress , pero luego es posible que necesite un tiempo de espera. Lo adjunté al evento de change para simplificarlo (lo que significa que es posible que deba tabular la entrada ver la actualización).
<label for="myinput">{{label}}</label>
<input id="myinput" type="text"/>
<p></p>You can change the label above by typing something below</p>
<label for="labeltext">New Label Text</label>
<input type="text" id="labeltext" (change)="changeLabel($event)"/>
Sí, hay enlace de dos vías en angular2. Consulte aquí: https://angular.io/docs/ts/latest/guide/template-syntax.html#!#ngModel
Entonces, ¿cómo usarlo en componentes personalizados?
Lo que me gusta hacer es algo esto:
private currentSelectedItem: MachineItem;
@Output() selectedItemChange: EventEmitter<MachineItem> = new EventEmitter<MachineItem>();
@Input() set selectedItem(machineItem: MachineItem) {
this.currentSelectedItem = machineItem;
this.selectedItemChange.emit(machineItem);
}
get selectedItem(): MachineItem {
return this.currentSelectedItem;
}
Y usalo como
<admin-item-list [(selectedItem)]="selectedItem"></admin-item-list>
También puede emitir el nuevo valor donde realmente se cambia. Pero me parece muy conveniente hacer eso de forma global con un método de establecimiento y no tengo que preocuparme, por ejemplo, cuando lo vinculo directamente con mi vista.
Nota: desplácese hacia abajo la respuesta para el enlace ng-model
En realidad, podría hacer eso, solo que necesita invocar el (keyup) interno (similar al compendio) para actualizar el enlace en la zona. Solo puede agregar un evento (keyup) para eso. De forma similar, también puede utilizar enlaces de directivas con el diccionario de properties de la configuración de componentes.
Ejemplo:-
<input #label (keyup)>
<!-- variable #label represented as the element itself and accessible as property on controller instance
You can even bind keyup to a function or another another function and pass value from the label property-->
Mostrar como:
<p>{{label.value}}</P>
El componente principal tiene un cuadro de texto y una etiqueta.
import { Component, bootstrap} from ''@angular/core'';
import {Display} from ''display'';
@Component({
selector: ''my-app'',
template: `<p><b>Parent Component:</b><p><input #label (keyup) (change)="handleChange(label.value)">
<p>{{label.value}}</P> <display [text]="label"></display></p></p>`,
directives: [Display]
})
class MainComponent {
label: any;
constructor() {
}
handleChange(label){
this.label = label;
console.log(this.label);
}
}
Ahora mostrándolo en el componente hijo también:
@Component({
selector: ''edit'',
template: `<p><b>Child Component:</b></p>{{text.value}}`
})
export class Edit {
@Input() text:any;
}
Actualización - ng-model para enlace de 2 vías
Aunque Angular2 está enlazado por única vez por defecto, se ha introducido el azúcar ngModel para lograr una unión de 2 vías. Con eso podrías hacer por ejemplo:
<input ngControl="name" [(ngModel)]="name">
Aquí el uso de corchetes ( [..] ) sugiere el enlace de propiedades y los corchetes ( (..) ) para el enlace de eventos. Básicamente, cuando utiliza ng-model , está habilitando ambos enlaces. ngModel es más un evento. Detrás de escena, crea un evento observable (con EventEmitter ) para rastrear los cambios de value en el elemento enlazado y actualizar la propiedad enlazada respectivamente. Por ejemplo:-
Incluir formDirectives:
import {FORM_DIRECTIVES} from ''@angular/common'';
y con forma
<form (ngSubmit)="onSubmit()" let-f="form">
<input ngControl="name" [(ngModel)]="name">
<button>Click me and check console</button>
</form>
sin forma
<input [(ngModel)]="name">
<button (click)="onSubmit()">Click me and check console</button>
ya no es necesario incluir la dependencia de formDirectives en la anotación de vista.
@Component({
template: .....,
directives: [FORM_DIRECTIVES]
})
También lea la descripción bonita de Victor Savkin sobre el enlace bidireccional en angular2 creando el evento ng-model y cómo funciona.