当css bootstrap作为angular2组件的一部分呈现时，它会不起作用吗？

Question

我拿了一些可免费下载的模板，它是用bootstrap，CSS和Jquery构建的。

如果我尝试呈现html内容(带有对CSS、JS的适当引用)，则应用程序/功能工作正常

我在这里提到的功能是用css/jquery编写的左侧菜单栏的展开/折叠功能，作为模板的一部分。但是，当我尝试将相同的html呈现为angular2组件(如angular2 HTML templateUrl)时，上述菜单功能不起作用

你知道可能的错误是什么吗？

我的组件如下

@Component({
    selector: 'MenuLayout',
    templateUrl: './HTML/Layouts/Layout.html',
    providers: [ClientAPIService, Constants],
    encapsulation: ViewEncapsulation.None
})

Layout.html文件包含了所有相关的带有CSS类的标签。

在Idex.html文件中，引用了所有的CSS

 <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="fonts/css/font-awesome.min.css" rel="stylesheet">

我已经复制了这个问题，并将代码签入到Github url

Answer 1

您是否查看了顶级组件上的CSS封装是如何定义的(它是您进行样式声明的地方)？

示例：

@Component({

  ...

  encapsulation:    ViewEncapsulation.None,

  styles:           [
    ...
  ]
})

有关https://angular-2-training-book.rangle.io/handout/advanced-components/view_encapsulation.html的更多信息

Answer 2

将完整路径放入您的资产。如下所示：

 <link href="/fullPathToMyAssets/bootstrap.min.css" rel="stylesheet">