首页 文章

不显示Angular组件库的内联样式

提问于
浏览 次
1

我创建了一个库，其中包含一些用于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包的所有指导原则 .

Edit: 我使用上面示例输出中的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 {}
javascript angular typescript

2 回答

  • 0

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

    回复于
  • 0

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

    而不是这个：

    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：`

    回复于

相关问题