Question

我已经采用了一些免费下载模板，该模板内置于bootstrap，CSS和Jquery。

如果我尝试渲染html内容（使用适当的CSS引用，JS），应用程序/功能可以正常工作

我在这里指的功能是用css / jquery编写的左侧菜单栏的展开/折叠功能作为模板的一部分。但是当我尝试渲染与angular2组件相同的html（如angular2 HTML templateUrl）时，上述菜单功能无法正常工作

任何想法可能出现的错误是什么？

我的组件如下

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

Layout.html文件包含所有相关的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">

将css bootstrap作为angular2组件的一部分呈现时，它是否会起作用？

2 个答案: