Angular @Input裝飾器 表明為輸入屬性

小白一只，最近在看Angular的東西，記錄備忘。

 ==========手====動====分====割====線============

 

1.建立一個子模塊fathertochild.ts：

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

@Component({
　　selector: 'page-myinput',
　　template: `<h1>{{title}}{{subtitle}}</h1>
 6　　 Bank Name: {{bankName}} &nbsp;&nbsp;&nbsp;
　　Account Id: {{id}}`
})

export class MyInputComponent {
　　@Input() subtitle='';
　　title='This is Title.';
　　@Input('account-id') id:string;//account-id為id的別名，不要也沒關系
　　@Input()bankName:string;
}
 

2.別忘了在app.module.ts中聲明：

import { MyInputComponent } from "../pages/myinput";
 
@NgModule({
4　　 declarations: [
　　　　……
　　　　MyInputComponent
　　],
 

 

3.在父模塊中使用：

 

@Component({
　　selector: 'page-home',
　　template:`
　　<page-myinput bank-name="RBC" account-id="4747" subtitle="this is subtitle"><page-myinput>`,
　　})
export class HomePage {
　　……
　　}

 

 

最終效果：

Bank Name沒有值是因為使用了不存在的名字：bank-name，改成bankName就好了。

 

參考資料：

屬性型指令，為什么要加@Input