角を覚えていて ブラウザにグリフコン(ハート)を表示したい。 フルコード: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"
}
}
を必要に応じて、コンソールがエラーが表示されないことを確認していません。
私の側からいくつかの情報が欠落している場合は、私に知らせてください。
ありがとうございました。
ブートストラップまたはグリフコンを含むライブラリがありますか? – Sefa