Question

我创建了一个包含一些用于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>"
            },] },
];

如您所见，这些样式使用styles属性在此处内联。这里显示的样式不会应用。

有谁知道为什么会这样？我对这个特殊问题毫无头绪。我遵循了Angular Package Format中创建Angular包的所有准则。

修改我从上面的示例输出中使用AppComponent引导Angular应用程序，如下所示：

import { NgModule } from '@angular/core';
import { AppComponent as LibraryAppComponent, AppModule as LibraryAppModule } from '@myscope/library';

@NgModule({
    imports: [ LibraryAppModule ],
    bootstrap: [ LibraryAppComponent ]
})
export class AppModule {}

Answer 1

猜猜你需要:host /deep/。 component styles guid

Answer 2

你应该从样式中删除双引号并添加反引号/急性，你的样式将应用如下：

而不是：

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组件库的内联样式

2 个答案: