时间戳

首页 > 解决方案 > 使用引导程序在 Angular 中没有字形图标输出

angular - 使用引导程序在 Angular 中没有字形图标输出

问题描述

我正在尝试输出glyphicon-star。我已经安装了引导程序，并使用 angular cli创建了一个名为favorite的组件。这是我最喜欢的.component.html 的内容

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

以下是我最喜欢的.component.ts 的内容


@Component({
  selector: 'favorite',
  templateUrl: './favorite.component.html',
  styleUrls: ['./favorite.component.css']
})
export class FavoriteComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

以下是我的app.component.html的内容

<favorite></favorite>

有时我会[WDS] 断开连接！错误。但我没有得到想要的输出。我试过执行npm update

PS：当我尝试显示主按钮时，它工作正常。

标签： angulartwitter-bootstrap

解决方案

  1. 你需要安装 Bootstrap 和 jQuery

    例子：

    cd myProject
npm install --save bootstrap jquery

  2. 更新 angular.json：

    例子：

    {
  ...
  "projects": {
  "contactsapp": {
    ...
    "architect": {
        "build": {
         ...
        "styles": [
           "src/styles.css",
           "node_modules/bootstrap/dist/css/bootstrap.min.css"
            ...
        "scripts": [
           "node_modules/jquery/dist/jquery.min.js",
           "node_modules/bootstrap/dist/js/bootstrap.min.js"
        ]

  3. 在模板中使用 Bootstrap

    示例：喜爱的.component.html

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

如果您仍然遇到问题/疑问，我发现本教程很有帮助：

使用 Bootstrap 设计 Angular 应用程序，Ahmed Bouchefra

推荐阅读