Question

我在Angular2中使用了pikaday.js和moment.js.

为了在Angular2中使用第三方库构建，添加了angular-cli.json的脚本路径。

我看到了如何构建第三方库。链接在下面。

https://github.com/angular/angular-cli#3rd-party-library-installation

我安装了pikaday.js和moment.js。

$ npm install pikaday moment --save-dev

然后，我添加了脚本路径和css文件到angular-cli.json的路径。

"app": [{ 
    "styles": [
      "styles.css",
      "../node_modules/pikaday/css/pikaday.css",
      "../node_modules/pikaday/css/site.css",
      "../node_modules/pikaday/css/theme.css",
      "../node_modules/pikaday/css/triangle.css",
    ],
    "scripts": [
      "../node_modules/pikaday/pikaday.js"
    ]
}]

那就是成功！ angular-cli非常有用。

但是，我发现了一个问题。

Angular cli使用Angular2将第三方css输出到页面的html中。

但是有一个页面不想使用该库。因为，页面布局样式被破坏了。

所以，请告诉我如何解决这个问题。

感谢您提供任何帮助。

修改

我修改了我的组件。下方。

import {Component, OnInit, Input, ElementRef, ViewEncapsulation} from '@angular/core';
const pikaday = require('../node_modules/pikaday/pikaday');
const pikadayStyle = require('../node_modules/pikaday/scss/pikaday.scss');

@Component({
    selector: '[appDatePicker]',
    template: '',
    styleUrls: [pikadayStyle],
    encapsulation: ViewEncapsulation.None
})

export class DatePickerComponent {
    // implement
}

谢谢VadimB。

Answer 1

我不确定我的解决方案是否可以解决您的特定问题，因为它取决于此库的内部结构，但对我来说这是一个解决方案 - 我使用require模块加载器;

var app = require('some-non-ES6-library');

先试试这个。

<script>
    System.amdRequire();
    System.amdDefine();
    System.config({
      ...
    });
  </script>

如何加载第三方CSS只在Angular2中需要的页面

修改

1 个答案: