Javascript 向Angular 2中的组件添加外部CSS和JS链接

为了仅在my.component.ts中使用“Bootstrap Select”，我尝试使用以下方法：

@Component({
  templateUrl: 'my.component.html',
  styleUrls: [
        'my.component.css',
         //Bootstrap Select
        'https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/css/bootstrap-select.min.css'
  ]
})

我得到了这个错误：

无法解析“C:…\app\components”中的“/…”

似乎angular 2在我的文件夹中搜索引导。那么我可以告诉他这是一个外部URL吗

我还需要添加我的js链接：

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/js/bootstrap-select.min.js"></script>

来自

元数据中的URL样式

通过添加样式URL，可以从外部CSS文件加载样式 属性转换为组件的@component装饰器：

---

现在。出于某种目的，您可能需要更改封装。这是这里的主题。看一看。它解决了您添加外部CDN的问题，但我想给出完整信息以及为什么需要它。为了确保您的安全，这是解决您的场景的唯一方法

---

另外，其他建议也解决了添加脚本标记的问题。我建议您将其添加到组件模板中，就像您应该直接在html中所做的那样，您的组件仍然是特定的。

您必须给它一个到您的文件的相对路径

以“/”开头，这里是指向css文件/my.component.css的路径

对于正在调用的第二个css文件。该文件会进入index.html文件，如下所示：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/css/bootstrap-select.min.css">

您不能在“样式URL”中使用外部链接。我相信这一个必须在index.html中导入。我只喜欢在我的.component中使用第二个css，这就是为什么我没有将它添加到我的index.html中，如果我这样做，它将更改我的所有应用程序样式OK，然后创建另一个css组件，然后执行以下操作：

@import url("https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/css/bootstrap-select.min.css”；

创建另一个css组件是什么意思，以及如何创建？

@Component({
      selector: 'hero-team',
      template: `
        <link rel="stylesheet" href="app/hero-team.component.css">
        <h3>Team</h3>
        <ul>
          <li *ngFor="let member of hero.team">
            {{member}}
          </li>
        </ul>`
    })

@import 'hero-details-box.css';

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/css/bootstrap-select.min.css">