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的內容。
參考:
沒有留言:
張貼留言