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

Question

我正在学习有关 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;
    }
}

Answer 1

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

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

Answer 2

你好像还没有告诉 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;
    }
}

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

Can't bind to custom input of component - Angular2

angular2-directives

angular2-template

angular