Angular 4： Component

建立component

透過
ng g c comp1(Component名稱)
指令會在目錄下建立一個目錄，名稱為ComponentName，同時會建立幾個相關檔案，
檔名以Component名稱開頭，

• comp1.component.ts        
• comp1.component.html   //template檔
• comp1.componen.css      //css
• comp1.component.spec.ts    //測試時使用

同時會在app.module.ts檔案內新增comp1設定

  

import { Comp1Component } from './comp1/comp1.component';

 @NgModule({

  declarations: [

    AppComponent,

    Comp1Component

  ],

  imports: [

    BrowserModule,

    FormsModule,

    HttpModule

  ],

  providers: [],

  bootstrap: [AppComponent]

})

如果要手動加入，要記得在declarations內加入component class名稱，同時要記得將component import進來，否則程式會不認得Comp1Component是什麼。

Component使用

import { Component, OnInit } from '@angular/core';

@Component({

  selector: 'app-comp1',    

  template: `<app-comp1></app-comp1>`,

  styleUrls: ['./comp1.component.css']

})

export class Comp1Component implements OnInit {

  constructor() { }

  ngOnInit() {

  }

}

Component內有幾個屬性：

• selector：

selector比較有趣，表示什麼條件下要以Comp1Component呈現，

在這邊指定為'app-comp1'時，在找到<app-comp1></app-comp1>即會以Comp1Component來呈現，還有下列用法：

'app-comp1'        ->      <app-comp1></app-comp1>  //Element形式

'[app-comp1]'      ->      <div app-comp1></div>    // Element屬性

'.app-comp1'       ->      <div class="app-comp1"></div>   //Class

• template/templateUrl：

templateUrls是指明了template所在的路徑，像是

templateUrl: './comp1.component.html',

template則不載入html檔案，反而是直接寫html code，但要以``包覆(esc下方的符號)

@Component({

  selector: 'app-comp1',

  template: `

  <h1>Hello</h1>

  `,

  styleUrls: ['./comp1.component.css']

})

• styles/styleUrls

styleUrls與templateUrl是一樣的，透過指定路徑來載入css，不同的是其接受的是陣列形式。

styleUrls: ['./comp1.component.css']

styles與template相同，是直接將css檔案寫入，不另外載入css檔。

@Component({

  selector: 'app-comp1',

  template: `

  <h1>Hello</h1>

  `,

  styles: [`

  h1 {

    color: blue;

  }

  `]

})