角度2组件不能正常工作

Question

我只是盯着Angular，并且有一个简单的角度组件（在左边的流程问题中，您看到左边的glyphicon glyphicon-star）我想要显示但我只能得到不可点击的明星。

这里是我的代码： 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; 
    } 
} 

在app.component我试图使这个 '收藏' 部分：如何使

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

代码不加载组件 - 我只得到喜欢的喜爱

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

你可以用它在a标签，并单击事件移动到它：

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> 

如果不工作，请尝试以下

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

Answer 4

请注意，JavaScript的标识是区分大小写的。

你的组件模板具有（click）=“onClick（）”，但组件类定义了onclick（）{...}。也尝试构建一些代码作为应用程序文件夹保存所有文件，很难遵循。 检查官方风格指南：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; 
    } 
}