Angular2如何绑定到自定义组件输入参数答案

【问题标题】：Angular2 how to bind to a custom component input parameterAngular2如何绑定到自定义组件输入参数
【发布时间】：2017-01-09 10:30:15
【问题描述】：

我有一个用于显示电话号码的自定义组件（stm-phone-number）。它有一个名为phoneNumber 的@Input() 参数。当我尝试在 *ngFor 中将数据绑定到它时，我收到以下错误消息：

无法绑定到“phoneNumber”，因为它不是“stm-phone-number”的已知属性。

这是我的代码：

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

import { KeyValueModel } from '../../models/types/key-value';

@Component({
    moduleId: module.id,
    selector: 'stm-phone-number',
    templateUrl: './phone-number.component.html',
    styleUrls: [ './phone-number.css' ],
    providers: [],
    directives: []
})
export class PhoneNumberComponent implements OnInit 
{
    @Input() phoneNumber: KeyValueModel<string,string>; 

    constructor ()
    {
    }


    ngOnInit()
    {
    }
}

这是我的使用方法：

<section class="grid-block" *ngFor="let entry of PhoneNumberList">
    <stm-phone-number [phoneNumber]="entry"></stm-phone-number>
</section>

注意：PhoneNumberList 是 KeyValueModel<string,string> 的数组

如何将ngFor 中的迭代值绑定到自定义组件的@Input 属性？

【问题讨论】：

标签： angular angular2-template angular2-directives

【解决方案1】：

您需要将PhoneNumberComponent添加到您正在使用它的模块的directives: [...]列表中或导入包含PhoneNumberComponent的模块（> = RC.5）否则该组件将不会被实例化，即通常是什么导致你提到的错误。

【讨论】：