javascript - 如何在Angle 2和ExpressJS Node.js中集成外部CSS和JS

我是Angular2和NodeJ的新手。我只是想知道在angular2和Nodejs Express应用程序中集成外部css和js的可能方法。例如，我想在Node.js中集成引导管理主题。以下是屏幕截图，供您参考应用程序结构。

客户端文件夹angular2中的屏幕截图。

Express Nodejs App的屏幕截图。

谢谢。提前。

最佳答案

要允许外部样式影响组件的内容，您可以更改视图封装（这是防止样式“渗入”组件的原因）。

@Component({
    selector: 'some-component',
    template: '<div></div>',
    styleUrls: [
        'http://example.com/external.css',
        'app/local.css'
    ],
})

注意：视图封装实现了一个目的。更好的方法是将样式直接添加到应影响的组件中。 ViewEncapsulation是针对每个组件设置的，在某些情况下可能会派上用场。
另请参见此相关问题https://github.com/angular/angular/issues/5390

脚本示例

    <head>
       <link href="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/0.8.1/cropper.css" rel="stylesheet">
       <script src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/0.8.1/cropper.js"></script>
       <script type="text/javascript">
        window.addEventListener('DOMContentLoaded', function () {
          var image = document.querySelector('#image');
          var cropper = new Cropper(image, {
            viewMode: 3,
            dragMode: 'move',
            autoCropArea: 1,
            restore: false,
            modal: false,
            guides: false,
            highlight: false,
            cropBoxMovable: false,
            cropBoxResizable: false,
            toggleDragModeOnDblclick: false,
          });
        });

      </script>

</head>

注意：以上链接可能根据JS库的cdn链接而有所不同。

关于javascript - 如何在Angle 2和ExpressJS Node.js中集成外部CSS和JS，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/44665952/