角2のコンポーネントが動作しない

Question

私はちょうど角を見つめて、表示したい単純な角成分（左上に表示されるグリフコンのグリフコンスター）を表示したいが、クリックできない星 。ここ

は私のコードです：app.componentで favorite.component.ts

import {Component} from 'angular2/core'; 

@Component({ 
    selector: 'favorite', 
    template: `  
<i 
     class="glyphicon" 
     [class.glyphicon-star-empty] ="!isFavorite" 
     [class.glyphicon-star]="isFavorite" 
     (click)="onClick()"> 
    </i> 
    ` 
}) 
export class FavoriteComponent { 
    isFavorite = false; 

    onclick() { 
     this.isFavorite = !this.isFavorite; 
    } 
} 

私はこの '好きな' コンポーネントをレンダリングしようとしている：

import {Component} from 'angular2/core'; 
import {CoursesComponent} from './courses.component' 
import {AuthorsComponent} from './authors.component' 
import {FavoriteComponent} from './favorite.component' 



@Component({ 
    selector: 'my-app', 
    template: '<h1>My First Angular 2 App</h1><courses></courses><authors></authors><button class ="btn btn-primary">Submit</button><br><favorite></favorite>', 
    directives: [CoursesComponent, AuthorsComponent] 
}) 
export class AppComponent { } 

はどのようにレンダリングします私のapp.componentのコンポーネントですか？

ここ

全コード：https://github.com/aindriu80/Angular2withTypeScript

コードは、コンポーネントをロードしません - 私はあなたがaタグでそれをラップし、それにクリックイベントを移動することができます

Answer 1

を以下にこれを行います。 app.components.tsファイルに欠落している指示がありました。大文字と小文字を区別してくれてありがとう。

app.component.ts

import {Component} from 'angular2/core'; 
import {CoursesComponent} from './courses.component' 
import {AuthorsComponent} from './authors.component' 
import {FavoriteComponent} from './favorite.component' 



@Component({ 
    selector: 'my-app', 
    template: '<h1>My First Angular 2 App</h1><courses></courses><authors></authors><button class ="btn btn-primary">Submit</button><br><favorite></favorite>', 
    directives: [CoursesComponent, AuthorsComponent, FavoriteComponent] 
}) 
export class AppComponent { } 

また、私はfavorite.components.tsファイル内のonClick（）に大文字のCを持っていませんでした。

favorite.component.ts：

import {Component} from 'angular2/core'; 

@Component({ 
    selector: 'favorite', 
    template: `  
<i 
     class="glyphicon" 
     [class.glyphicon-star-empty]="!isFavorite" 
     [class.glyphicon-star]="isFavorite" 
     (click)="onClick()"> 
    </i> 
    ` 
}) 
export class FavoriteComponent { 
    isFavorite = false; 

    onClick(){ 
     this.isFavorite = !this.isFavorite; 
    } 
} 

Answer 2

お気に入りのお気に入りを取得します：

import {Component} from 'angular2/core'; 

@Component({ 
    selector: 'favorite', 
    template: ` 
    <a (click)="onClick()"> 
     <i 
      class="glyphicon" 
      [class.glyphicon-star-empty]="!isFavorite" 
      [class.glyphicon-star]="isFavorite" 
      > 
     </i> 
    </a> 
    ` 
}) 
export class FavoriteComponent { 
    isFavorite = false; 

    onClick() { 
     this.isFavorite = !this.isFavorite; 
    } 
} 

Answer 3

これを試してください。余分な二重引用符を '"' 削除

、

<i 
    class="glyphicon" 
    [class.glyphicon-star-empty] ="!isFavorite" 
    [class.glyphicon-star]="isFavorite" 
    (click)="onClick()"> 
</i> 

動作しない場合は、JavaScriptの識別子は大文字と小文字が区別されますのでご注意ください

<i class="glyphicon" [ngClass]="{'glyphicon-star-empty':!isFavorite,'glyphicon-star':isFavorite}" 
    (click)="onClick()"> 
</i> 

Answer 4

以下試してください。

あなたのコンポーネントのテンプレートを（click）= "onClick（）"がありますが、コンポーネントクラスはonclick（）{...}を定義しています。

また、appフォルダがすべてのファイルを保持しているため、コードを少し構造化してみることは難しい。公式のスタイルガイドをチェック ：私はチャンスを持っているかどうhttps://angular.io/docs/ts/latest/guide/style-guide.html#!#04-04

Answer 5

を私はそれを得た方法

import {Component} from 'angular2/core'; 

@Component({ 
    selector: 'favorite', 
    template: ` 
    <a (click)="onClick()"> 
     <i class="glyphicon" *ngIf="isFavorite" [ngClass]="glyphicon-star"> 
     </i> 

     <i class="glyphicon" *ngIf="!isFavorite" [ngClass]="glyphicon-star-empty"> 
     </i> 
    </a> 
    ` 
}) 
export class FavoriteComponent { 
    isFavorite = false; 

    onClick() { 
     this.isFavorite = !this.isFavorite; 
    } 
}