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