angularV4+學習筆記

angular學習筆記之組件篇

1註解

1.1組件註解

@Component註解，對組件進行配置。

1.1.1註解@Component的元數據

• selector
• template/templateUrl
• inputs/outputs
• host
• styleUrls

selector:選擇器

頁面渲染時，Angular組件匹配的選擇器,

使用方式：

<ip-address-form></ip-address-form>

採用html標籤的方式。
在《Angular權威教程》中，說明另一種，<div ip-address></div>,這種規則與選擇器匹配規則一致，也能夠爲class選擇器，根據實際場景而用。（在Ideal中引入TSLint後，程序可以正常運行，可是編輯器會警告，並提示消除警告方案）

例如：

@Component({
  selector: '.app-single-component',
  template: `
  <div>
    這個是子組件 ：{{name}}
    <button (click)="sendMessage()" >點我</button>
  </div>
  `
})

templdate/templdateUrl：模版/模版路徑

組件具體的html模版，template爲模版，templateUrl爲模版的路徑。
template中支持es6的反引號，進行多行編寫，templdateUrl用於配置html模版的路徑。

注意：在Typescript中的構造函數只容許有一個，這也是它與es6的一個區別

inputs/output:輸入/輸出

組件中的輸入與輸出，能夠理解爲，數據輸入到組件中，數據從組件中輸出到父組件中。

輸入使用方式:[變量名]，在父元素頁面中使用，@Input()，在子組件class中使用,代碼例子以下：

single-component.component.ts

@Component({
      selector: 'app-single-component',
      template: `
          <div>
            這個是子組件 ：{{name}}
          </div>
          `
        })
export class SingleComponentComponent implements OnInit {

  @Input () name: string ;

  ngOnInit () {
  }

}

app.component.ts

@Component({
  selector: 'app-root',
  template: `
    <div>
      <app-single-component [name]="simple"></app-single-component>
  </div>
  `
})
export class AppComponent {
  simple: string;

  constructor () {
    this.simple = '個人世界';
  }
}

其中input做爲@Component的元數據，那麼還有另一種寫法，以後的輸出也一致

其中一段代碼

@Component({
  selector: 'app-single-component',
  inputs:['name'],
  template: `
  <div>
    這個是子組件 ：{{name}}
  </div>
  `
})

輸出使用方式：輸出的方式或許用廣播/訂閱來講更加合適。

single-component.component.ts改

@Component({
  selector: 'app-single-component',
  template: `
  <div>
    這個是子組件 ：{{name}}
    <button (click)="sendMessage()" >點我</button>
  </div>
  `
})
export class SingleComponentComponent implements OnInit {

  value: string;
  @Input () name: string ;
  @Output() emotter: EventEmitter<string>;

  ngOnInit () {
  }

  constructor () {
    this.value = '來源於組件的值';
    this.emotter = new EventEmitter<string>();
  }

  sendMessage (): void {
    this.emotter.emit(this.value);
  }

}

app.component.ts改

@Component({
  selector: 'app-root',
  template: `
    <div>
      <app-single-component [name]="simple" (emotter)="getComponentData($event)"></app-single-component>
  </div>
  `
})
export class AppComponent {
  simple: string;

  constructor () {
    this.simple = '個人世界';
  }

  getComponentData (message: string): void {
     console.log(`獲取到子組件中的值：${message}`);
  }
}

host:用於在元素行配置元素屬性

值爲json對象key-value，而且做用只作做用於當前組件內部，經常使用來添加class.

styleUrls:層疊樣式表url，值位數組，能夠傳多個。

固然必要的，在須要用到的component的模塊中引入：

@NgModule({
  declarations: [
    AppComponent,
    SingleComponentComponent // 引入的指令，放在聲明裏面
  ],
  imports: [
    BrowserModule // 引入的模塊
  ],
  providers: [],
  bootstrap: [AppComponent] //引導應用的根組件
})
export class AppModule { }

關於@component的元數據還未徹底，因此後面會繼續完善。

源代碼git地址