无法绑定到组件的自定义输入 - Angular2答案

【问题标题】：Can't bind to custom input of component - Angular2无法绑定到组件的自定义输入 - Angular2
【发布时间】：2016-12-14 14:25:09
【问题描述】：

我正在做关于 Angular2 的在线课程，但我遇到了让我的自定义输入工作的问题。我有一个简单的微调器组件，我希望仅在它的可见输入设置为 true 时才显示它，但是当我在浏览器中运行它时，我得到一个无法绑定的错误，告诉我它不是本机属性。

这是我所拥有的一些简单的快照：

微调器组件

import {Component, Input} from 'angular2/core';

@Component({
    selector: 'spinner',
    template: `
        <i *ngIf="visible" class="fa fa-spinner fa-spin fa-3x"></i>
    `
})
export class SpinnerComponent { 
    @Input() visible = true; 
}

帖子组件

import {Component, OnInit} from 'angular2/core';
import {HTTP_PROVIDERS} from 'angular2/http';

import {PostsService} from './posts.service';
import {SpinnerComponent} from './spinner.component.ts'

@Component({
    selector: '<posts></posts>',
    template: `
        <h1>Posts</h1>
        <spinner [visible]="postsLoading"></spinner>
        <div class="row">
            <ul class="list-group col-sm-6">
                <li *ngFor="#post of posts" class="list-group-item">
                    {{ post.body }}
                </li>
            </ul>
        </div>
    `,
    providers: [HTTP_PROVIDERS, PostsService]
})

export class PostsComponent implements OnInit { 

    postsLoading;
    posts = [];

    constructor(private _posts_service : PostsService) {
    }

    ngOnInit() {
        this._posts_service.getPosts()
            .subscribe(posts => this.posts = posts);

        this.postsLoading = false;
    }
}

【问题讨论】：

标签： angular angular2-template angular2-directives

【解决方案1】：

您似乎没有告诉 PostsComponent SpinnerComponent

import {Component, OnInit} from 'angular2/core';
import {HTTP_PROVIDERS} from 'angular2/http';

import {PostsService} from './posts.service';
import {SpinnerComponent} from './spinner.component.ts'

@Component({
    selector: 'posts',
    template: `
        <h1>Posts</h1>
        <spinner [visible]="postsLoading"></spinner>
        <div class="row">
            <ul class="list-group col-sm-6">
                <li *ngFor="#post of posts" class="list-group-item">
                    {{ post.body }}
                </li>
            </ul>
        </div>
    `,
    providers: [HTTP_PROVIDERS, PostsService], 
    directives: [SpinnerComponent]
})

export class PostsComponent implements OnInit { 

    postsLoading;
    posts = [];

    constructor(private _posts_service : PostsService) {
    }

    ngOnInit() {
        this._posts_service.getPosts()
            .subscribe(posts => this.posts = posts);

        this.postsLoading = false;
    }
}

【讨论】：

【解决方案2】：

选择器应该是 CSS 选择器
directives 需要列出您在模板中使用的指令

@Component({
    selector: 'posts',
    directives: [SpinnerComponent],
    template: `
      ....
    `,
    providers: [HTTP_PROVIDERS, PostsService]
})

【讨论】：