2018年5月21日 星期一

Angular 08.(雙向繫結)(Two Way Binding)

1.在使用表單前要先匯入FormsModule,先至app.module.ts
import { FormsModule } from '@angular/forms';

@NgModule({
  declarations: [
    AppComponent,
    PagesComponent
  ],
  imports: [
    BrowserModule,
    FormsModule<=新增
  ],
  providers: [],
  bootstrap: [AppComponent]
})
2.在app.component.ts新增一個屬性
 export class AppComponent {  
  text; 
}
3.在app.component.html新增雙向繫結[(ngModel)="xxx"]
您輸入: {{text}} 字數: {{ text.length}}
以上內容若有不足或侵權請告知將立即處理

Angular 07.(事件繫結)(Event Binding)

依上篇範例到app.component.ts,新增多個方法來做不同的動作
export class AppComponent {
  hi = 'hi how are you';
  url = 'http://www.google.com';
  title = 'i\'m title';

  click() {
    this.hi = 'i click';
  }

  selectchange(value: string) {
    this.hi = value;
  }

  checked(checked: boolean) {

    if (checked) {
      this.hi = 'checked';
    } else {
      this.hi = 'not check';
    }
  }

}

到app.component.html裡新增三個html來對應剛剛的function
{{ hi }}


===============================================================
經過上述範例,在實作後其實不難懂,可能不太瞭解有哪些屬性可使用console.log($event);
以上內容若有不足或侵權請告知將立即處理

Angular 06.[屬性繫結] (Property Binding)

依上篇範例到app.component.ts,新增一個url的屬性
export class AppComponent {
  hi = 'hi how are you';
  url = 'http://www.google.com';
} 
到app.component.html裡修改href的屬性

在前端的超連結就會顯示出hi how are you,點擊後會到指定的連結www.google.com
===============================================================
自訂屬性data-xxx
到app.component.ts,新增一個title的屬性
export class AppComponent {
  hi = 'hi how are you';
  url = 'http://www.google.com';
  title = 'i\'m title';
}
到app.component.html裡修改加入data-title的屬性,前面需加入attr.

看原始碼就會有
 hi how are you
以上內容若有不足或侵權請告知將立即處理