網頁

▼

2019/5/24

Angular 使用Angular CLI建立Component元件

Angular的Component（中文可稱為元件或組件）是由html，css及ts三種檔案組成的東西，而Angular CLI可以快速地幫我們建立以上三個檔案，並設定好相關的配置。



在新建的angular專案中加入新的Component，先將命令提示字元(cmd)的目錄移到專案目錄下，然後輸入
ng generate component，Angular CLI就會幫我們建立好Component的相關檔案。

ng generate component可簡寫為ng g c。


例如我的angular專案目錄在D:\myapps\demo，我要在這個專案中加入新的HelloComponent，則在cmd將位置移到D:\myapps\demo>下，輸入ng generate component hello。

D:\myapps\demo>ng generate component hello
CREATE src/app/hello/hello.component.html (24
CREATE src/app/hello/hello.component.spec.ts (
CREATE src/app/hello/hello.component.ts (265 b
CREATE src/app/hello/hello.component.css (0 by
UPDATE src/app/app.module.ts (471 bytes)

執行完後便會在專案目錄下的src/app看到新增的hello資料夾，裡面有
hello.component.css（樣式 style），
hello.component.html（範本/模版 template），
hello.component.ts（邏輯程式 component），
hello.component.spec.ts（單元測試）。

以上即為Angular基本的Component元件組成。


Angular CLI除了新增以上Component的相關檔案外，還幫我們在src/app/app.module.ts加上新的Component的引用設定。

src/app/app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HelloComponent } from './hello/hello.component'; // <-- Angular CLI幫我們新增的

@NgModule({
  declarations: [
    AppComponent,
    HelloComponent // <-- Angular CLI幫我們新增的
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Angular CLI並且在HelloComponent的hello.component.ts的@Component設定好與hello.component.html及hello.component.css的關聯。

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

@Component({
  selector: 'app-hello', // HelloComponent的名稱
  templateUrl: './hello.component.html', // 將hello.component.html設為HelloComponent的html template
  styleUrls: ['./hello.component.css']   // 將hello.component.css設為HelloComponent使用的CSS樣式表
})
export class HelloComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

然後開啟src/app/app.component.html，在裡面加入HelloComponent的名稱標籤，也就是<app-hello>如下。

<!--The content below is only a placeholder and can be replaced.-->
<div style="text-align:center">
  <h1>
    Welcome to {{ title }}!
  </h1>
  <img width="300" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
</div>

<app-hello></app-hello> <!-- 加入HelloComponent -->

<router-outlet></router-outlet>

存檔後在畫面就會出現HelloComponent的內容。



參考：

沒有留言:

張貼留言