Javascript 角度元件库中的内联样式不显示

我创建了一个库，其中包含一些用于Angular 4应用程序的组件。在功能上，当我在应用程序中使用库中的组件时，一切都按预期工作。但是组件的CSS样式没有被应用

我使用Angular编译器（

ngc

）编译库，并有一个构建步骤，其中所有模板和样式都内联。生成的

.js

捆绑包中的一些输出示例：

AppComponent.decorators = [
    { type: Component, args: [{
                selector: "app",
                styles: ["h1, h2, h3, h4, h5, h6 { display: inline; } h1 { font-size: 24px; } h2 { font-size: 18px; } h3 { font-size: 14px; } h4 { font-size: 12px; } h5 { font-size: 10px; } h6 { font-size: 8px; } #placeholder { min-width: 100%; min-height: 100vh; height: 100vh; overflow-x: hidden; overflow-y: hidden; }"],
                encapsulation: ViewEncapsulation.None,
                template: "<router-outlet></router-outlet>"
            },] },
];

---

猜测您需要

：host/deep/

猜测您需要的

：host/deep/

您应该从样式中删除双引号，并添加反引号/锐引号，您的样式将被应用，请参见以下内容：

与此相反：

styles: ["h1, h2, h3, h4, h5, h6 { display: inline; } h1 { font-size: 24px; } h2 { font-size: 18px; } h3 { font-size: 14px; } h4 { font-size: 12px; } h5 { font-size: 10px; } h6 { font-size: 8px; } #placeholder { min-width: 100%; min-height: 100vh; height: 100vh; overflow-x: hidden; overflow-y: hidden; }"]

将其替换为反报价/急性：

styles: [`h1, h2, h3, h4, h5, h6 { display: inline; } h1 { font-size: 24px; } h2 { font-size: 18px; } h3 { font-size: 14px; } h4 { font-size: 12px; } h5 { font-size: 10px; } h6 { font-size: 8px; } #placeholder { min-width: 100%; min-height: 100vh; height: 100vh; overflow-x: hidden; overflow-y: hidden; }`]

---

按钮位于esc键的右下方，左键带有波浪号：~和锐角：`

您应该从样式中删除双引号并添加反引号/acute，您的样式将被应用，请参见以下内容：

与此相反：

styles: ["h1, h2, h3, h4, h5, h6 { display: inline; } h1 { font-size: 24px; } h2 { font-size: 18px; } h3 { font-size: 14px; } h4 { font-size: 12px; } h5 { font-size: 10px; } h6 { font-size: 8px; } #placeholder { min-width: 100%; min-height: 100vh; height: 100vh; overflow-x: hidden; overflow-y: hidden; }"]

将其替换为反报价/急性：

styles: [`h1, h2, h3, h4, h5, h6 { display: inline; } h1 { font-size: 24px; } h2 { font-size: 18px; } h3 { font-size: 14px; } h4 { font-size: 12px; } h5 { font-size: 10px; } h6 { font-size: 8px; } #placeholder { min-width: 100%; min-height: 100vh; height: 100vh; overflow-x: hidden; overflow-y: hidden; }`]

---

按钮位于esc键的右下方，左键上有波浪号：~和锐角：`

为什么？实际上，我将一个现有的Angular应用程序转换为这个库，这样我们就可以更容易地跨项目重用组件。当它仍然是一个应用程序而不是一个库时，样式还不错。转换过程中结构没有改变，相同的组件仍然是引导组件。唯一的区别是另一个应用程序现在使用该组件进行引导。为什么？实际上，我将一个现有的Angular应用程序转换为这个库，这样我们就可以更容易地跨项目重用组件。当它仍然是一个应用程序而不是一个库时，样式还不错。转换过程中结构没有改变，相同的组件仍然是引导组件。唯一的区别是另一个应用程序现在使用该组件进行引导。

ngc

似乎在内联资源后运行

ngc

时再次使用双引号替换反引号。在

ngc

is之后看起来是这样的：

AppComponent.decorators=[{type:Component，args:[{选择器：“app”，样式：[“div[数据宽度单位=\“0\”]{font-weight:bold；}h1、h2、h3、h4、h5、h6{display:inline；}]，封装：viewEncapsation.None，模板：“}，]}，”

ngc

在内联资源后运行

ngc

时，似乎再次将反引号替换为双引号。在

ngc

is之后看起来是这样的：

AppComponent.decorators=[{type:Component，args:[{选择器：“app”，样式：[“div[数据宽度单位=\“0\”]{font-weight:bold；}h1、h2、h3、h4、h5、h6{display:inline；}]，封装：viewEncapsation.None，模板：“}，]}，”你解决问题了吗？@Maximus不幸没有。仍在试图找出问题的原因。您可以共享您的库吗？或者它的最小副本？你解决了你的问题吗？@Maximus不幸没有。仍在试图找出问题的原因。您可以共享您的库吗？还是它的最小副本？