無法綁定到組件的自定義輸入 - Angular2

Question

我正在做一個Angular2的在線課程，但我遇到了使自定義輸入工作的問題。我有一個簡單的微調組件，我希望僅在它的可見輸入設置爲true時顯示，但是當我在瀏覽器中運行這個組件時，我得到一個無法綁定的錯誤，告訴我它不是本機屬性。

這裏有一個快速的幾個片斷我有：

Spinner組件

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></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; 
    } 
}