2016-10-20 19 views
0

角を覚えていて ブラウザにグリフコン(ハート)を表示したい。 フルコード:https://github.com/tsingh38/Angular2ブラウザにグリフコンが表示されない

マイComponentクラス:

Heart.component.htmlは含まれています

<span class="glyphicon glyphicon-heart"></span> 

を私はHeart.component.ts

だけでなく、 "アイコン" を使用してみました

import { Component, OnInit } from '@angular/core'; 

@Component({ 
    selector: 'app-heart', 
    templateUrl: './heart.component.html', 
    styleUrls: ['./heart.component.css'] 
}) 
export class HeartComponent implements OnInit { 

    constructor() { } 

    ngOnInit() { 
    } 

} 

app.component.ts

import { Component ,NgModule} from '@angular/core'; 
import{CoursesComponent} from './courses/courses.component'; 
import{AuthorComponent} from './author/author.component'; 
import{StarComponent} from './star/star.component'; 
import{HeartComponent} from './heart/heart.component'; 


@Component({ 
    selector: 'my-app', 
    templateUrl: './app.component.html', 
}) 

@NgModule({ 
    declarations:[CoursesComponent,AuthorComponent,HeartComponent] 
}) 
export class AppComponent { 
    title = 'app works!'; 
} 

app.component.html 

私はここで何かを書いて、それが表示されるはずです。

<div> 
<span class="glyphicon glyphicon-star"></span> 
</div> 
<app-heart></app-heart> 
<app-star></app-star> 
<courses></courses> 
<author></author> 

app.module.ts

import { BrowserModule } from '@angular/platform-browser'; 
import { NgModule } from '@angular/core'; 
import { FormsModule } from '@angular/forms'; 
import { HttpModule } from '@angular/http'; 

import { AppComponent } from './app.component'; 
import { CoursesComponent } from './courses/courses.component'; 
import { AuthorComponent } from './author/author.component'; 
import { AutoGrowDirective } from './directives/auto-grow.directive'; 
import { StarComponent } from './star/star.component'; 
import { HeartComponent } from './heart/heart.component'; 

@NgModule({ 
    declarations: [ 
    AppComponent, 
    CoursesComponent, 
    AuthorComponent, 
    AuthorComponent, 
    AuthorComponent, 
    AutoGrowDirective, 
    StarComponent,HeartComponent 
    ], 
    imports: [ 
    BrowserModule, 
    FormsModule, 
    HttpModule 
    ], 
    providers: [], 
    bootstrap: [AppComponent] 
}) 
export class AppModule { } 

Package.json私は

{ 
    "name": "angular2-demo", 
    "version": "0.0.0", 
    "license": "MIT", 
    "angular-cli": {}, 
    "scripts": { 
    "start": "ng serve", 
    "lint": "tslint \"src/**/*.ts\"", 
    "test": "ng test", 
    "pree2e": "webdriver-manager update", 
    "e2e": "protractor" 
    }, 
    "private": true, 
    "dependencies": { 
    "@angular/common": "~2.0.0", 
    "@angular/compiler": "~2.0.0", 
    "@angular/core": "~2.0.0", 
    "@angular/forms": "~2.0.0", 
    "@angular/http": "~2.0.0", 
    "@angular/platform-browser": "~2.0.0", 
    "@angular/platform-browser-dynamic": "~2.0.0", 
    "@angular/router": "~3.0.0", 
    "core-js": "^2.4.1", 
    "rxjs": "5.0.0-beta.12", 
    "ts-helpers": "^1.1.1", 
    "zone.js": "^0.6.23" 
    }, 
    "devDependencies": { 
    "@types/jasmine": "^2.2.30", 
    "@types/node": "^6.0.42", 
    "angular-cli": "1.0.0-beta.17", 
    "codelyzer": "~0.0.26", 
    "jasmine-core": "2.4.1", 
    "jasmine-spec-reporter": "2.5.0", 
    "karma": "1.2.0", 
    "karma-chrome-launcher": "^2.0.0", 
    "karma-cli": "^1.0.1", 
    "karma-jasmine": "^1.0.2", 
    "karma-remap-istanbul": "^0.2.1", 
    "protractor": "4.0.9", 
    "ts-node": "1.2.1", 
    "tslint": "3.13.0", 
    "typescript": "2.0.2" 
    } 
} 

を必要に応じて、コンソールがエラーが表示されないことを確認していません。

私の側からいくつかの情報が欠落している場合は、私に知らせてください。

ありがとうございました。

+1

ブートストラップまたはグリフコンを含むライブラリがありますか? – Sefa

答えて

3

あなたはパスも、あなたのローカルパスすることができ

<head> 
    <link rel="stylesheet" 
      href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
... 
</head> 

、以下に示すように<head>セクションでbootstrap.cssindex.htmlページを追加する必要があります。

+0

助けてくれてありがとう:) – Roxy

関連する問題