Kann nicht an benutzerdefinierte Eingabe der Komponente binden - Angular2

Question

Ich mache einen Online-Kurs auf Angular2, aber ich habe ein Problem mit meiner benutzerdefinierten Eingabe zu arbeiten. Ich habe eine einfache Spinner-Komponente, die ich nur zeigen möchte, wenn es sichtbare Eingabe ist, wird auf True festgelegt, aber wenn ich dies im Browser ausführen, erhalte ich einen Fehler, der mir sagt, dass es keine native Eigenschaft ist.

ist hier ein schneller paar Schnipsel von dem, was ich habe:

Spinner Komponente

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

Beiträge Component

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

• der Wähler ein CSS-Selektor sollte
• Richtlinien muss die Richtlinien zur Liste Sie in Ihrer Vorlage

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

Answer 2

Es sieht aus wie Sie nicht gesagt haben PostsComponent über die SpinnerComponent mit

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