将外部CSS和JS链接添加到Angular 2中的组件

Question

为了仅在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'中的'./ https://cdnjs.cloudflare.com/ ...'

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

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

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

Answer 1

从角度样式文档 。

元数据中的样式URL

您可以通过将styleUrls属性添加到组件的@Component装饰器中来加载外部CSS文件中的样式：

 @Component({
      selector: 'hero-details',
      template: `
        <h2>{{hero.name}}</h2>
        <hero-team [hero]=hero></hero-team>
        <ng-content></ng-content>
      `,
      styleUrls: ['app/hero-details.component.css']
    })
    export class HeroDetailsComponent {
    /* . . . */
    }

URL相对于应用程序根目录，通常是托管应用程序的index.html网页的位置。 样式文件URL与组件文件无关。 这就是示例URL开始src / app /的原因。 要指定相对于组件文件的URL，请参阅附录2。

您还可以将标记嵌入到组件的HTML模板中。

与styleUrls一样，链接标记的href URL相对于应用程序根目录而不是组件文件。

@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>`
    })

CSS @imports

您还可以使用标准CSS @import规则将CSS文件导入CSS文件。 有关详细信息，请参阅MDN站点上的@import。

在这种情况下，URL相对于要导入的CSS文件。

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

---

现在。 出于某种目的，您可能需要更改封装。 这是这里的主题。 将外部CSS样式加载到Angular 2组件中查看。 它解决了您添加外部CDN的问题，但我想提供完整信息以及为什么需要它。 为了确保您能够解决您的问题。

此外，其他建议可以解决您添加脚本标记的问题。 我建议只将它添加到您的组件模板中，因为您应该直接在html中进行组件的特定操作。

Answer 2

你必须给它一个文件的相对路径。

从“./开始，这里是你的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">