本範例介紹如何使用Angular寫一個簡單的加法計算頁面。
在Angular CLI輸入ng generate component demo
建立一個名Component元件名為DemoCompoment
。
完成以上的src/app
目錄結構如下:
src/app
│ app-routing.module.ts
│ app.component.css
│ app.component.html
│ app.component.spec.ts
│ app.component.ts
│ app.module.ts
│
└─demo
demo.component.css
demo.component.html
demo.component.spec.ts
demo.component.ts
把app.component.html
內容修改如下。<app-demo></app-demo>
即用來渲染DemoCompoment
的位置。
app.component.html
<app-demo></app-demo>
<router-outlet></router-outlet>
因為要利用雙向繫結/雙向綁定(two-way binding)來接收<input>
的輸入值,所以專案必須匯入FormsModule
,所以打開app.modules.ts
在@NgModule
的imports
陣列加入FormsModule
。
AppModule (app.modules.ts)
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms'; // <-- 匯入FormsModule
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { DemoComponent } from './demo/demo.component';
@NgModule({
declarations: [
AppComponent,
DemoComponent
],
imports: [
BrowserModule,
AppRoutingModule,
FormsModule // <-- 加上FormsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
打開demo.component.ts
並在DemoComponent
類別加入屬性x
,y
,result
以及加法函式calculate()
如下。
DemoComponent (demo.component.ts)
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-demo',
templateUrl: './demo.component.html',
styleUrls: ['./demo.component.css']
})
export class DemoComponent implements OnInit {
x = 0; // 接收<input [(ngModel)]="x"的輸入值
y = 0; // 接收<input [(ngModel)]="y"的輸入值
result = 0; // 在html template以插值符{{result}}顯示的結果值
constructor() { }
ngOnInit() {
}
/** 加法函式,計算 x + y */
calculate() {
this.result = this.x + this.y;
}
}
把DemoCompoment
元件的html template,也就是demo.component.html
的內容修改如下。
demo.component.html
<input type="number" [(ngModel)]="x"/> +
<input type="number" [(ngModel)]="y"/> = {{result}}
<button (click)=calculate()>Calculate</button>
完成後在Angular CLI輸入ng serve
啟動專案結果如下,可以在輸入欄位會輸入數值並點擊Calculate按鈕計算相加結果。
參考:
沒有留言:
張貼留言