Angular2 entry-Data Binding and angular2 entry-level binding

Angular2 entry-Data Binding and angular2 entry-level binding
Too many rows too many rowsIntroduction

In Angular2, the data binding method is one-way by default. The data binding method can be divided:

1. Property binding and interpolation expression component class-> Template

2. Event binding: Template-> component class

3. Bidirectional binding: Template <-> component class

 

Zookeeper events zookeeper event binding

Event binding binds events in the template to methods in the component class. For example, the HTML code in a component is:

<P> <a (click) = "doClick ($ event)"> click me </a> </p>

 

(Click) indicates the operation to be performed. When a user clicks, The doClick method in the component class is executed.

export class BindComponent implements OnInit {  constructor() { }  ngOnInit() {  }  doClick(event: any){      console.log(event.target.innertext);  }}

 

▓ Attribute binding and interpolation expressions

In fact, property binding and interpolation expressions are the same thing, because when parsing code, interpolation expressions are converted to property binding, so you can use either of them

The following code serves the same purpose.

<! -- Interpolation expression -->  <! -- Property binding --> 

 

Property binding is divided into HTML property binding and DOM property binding. What is the difference between them? Let's look at an example.

<input type="text" value="hello" (input)="doInput($event)" />

  doInput(event: any){      console.log(event.target.value);      console.log(event.target.getAttribute('value'));  }

　　

Browser display:

 

It can be seen that event.tar get. value is the obtained DOM attribute and is variable. Indicates the status of the current element.

Event.tar get. getAttribute ("value") obtains the HTML attribute, Which is immutable. Only initializes HTML elements and cannot be changed.

Note:

1. Some DOM attributes do not have HTML attributes mapped, and some HTML attributes do not have DOM attributes mapped.

2. The template is bound with DOM attributes.

 

　

HTML property binding
1. Bind basic HTML attributes

<Td [attr. colspan] = "expression"> </td>

2. css binding

<Div class = "a" [class] = "B"> </div> // B completely replaces a <div [class. a] = "fn ()"> </div> // fn () returns true and false if true is added. a <div [ngClass] = "{a: isA, B: isB}"> </div> // B completely replaces

3. Style binding

　　　　　　<button [style.color]="a?red:green">button</button>　　　　　　<button [ngStyle]="{'font-style':a?'red':'green'}">button</button>

 

 

▓

Two-way binding can be performed from the component class-> template, or from the template-> component class

Example:

<input type="text" [(ngModel)]="name" (input)="doInput()" />

  private name: string = 'asdf';    doInput(){      setInterval(() => {          this.name = 'sdf';      },3000);  }

　　

You can use [(ngModel)] to bind two-way data. First, modify the name in the input box to change the name value in the component class, which is a template group-> component class, the value of name is reset three seconds after the value is modified. It is a component class-> template.