aangular @Input 装饰器

转载自 http://www.ngui.cc/news/show-116.html

为了让我们能够开发更灵活的组件，Angular 为我们提供了 Input 装饰器，用于定义组件的输入属性。

使用 Input 装饰器

更新 SimpleFormComponent 组件

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

@Component({
  selector: 'app-simple-form',
  template: `
    <div>
     {{message}}
     <input #myInput type="text" (keydown.enter)="onEnter($event, myInput.value)">
     <button (click)="onClick($event, myInput.value)">点击</button>
    </div>
  `,
  styles: []
}) 

export class SimpleFormComponent implements OnInit { @Input() message: string; // ... }

更新 AppComponent 组件

import {Component} from '@angular/core'; import {MailService} from "./mail.service"; 

@Component({
  selector: 'app-root',
  template: `
    <h3>{{title}}</h3>
    <app-simple-form *ngFor="let message of mailService.messages;"
      [message]="message">
    </app-simple-form>
  ` }) 

export class AppComponent {
  title = 'Hello, Angular'; 

 constructor(private mailService: MailService) {}
}

在 AppComponent 组件模板中，我们使用 [message]="message" 属性绑定的语法，实现数据传递。即把数据从 AppComponent 组件，传递到 SimpleFormComponent 组件中。

需要注意的是，当 SimpleFormComponent 组件类的属性名称不是 message 时，我们需要告诉 Angular 如何进行属性值绑定，具体如下：

export class SimpleFormComponent implements OnInit { @Input('message') msg: string; // ... }

不过一般不推荐这样做，尽量保持名称一致。