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

您可以将其打包在a标记中并将click事件移动到它：

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 2

试试这个。

删除额外的双引号＆＃39;＆＃34;＆＃39;，

<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 3

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

您的组件模板有（点击）=＆＃34; onClick（）＆＃34;但是组件类定义了onclick（）{...}。

还尝试构建一些代码，因为app文件夹包含所有文件，很难遵循。查看官方风格指南：https://angular.io/docs/ts/latest/guide/style-guide.html#!#04-04

Answer 4

如果我有机会以下列方式执行此操作

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

Answer 5

我明白了。我的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;
    }
}

Angular 2组件无法正常工作

5 个答案: