Question

我目前正在从现有应用程序创建Angular 4的组件库。这是为了让客户可以选择扩展和/或定制我们的应用程序。默认情况下，自定义应用程序使用我们自己的AppComponent进行自举。例如：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';

import { AppComponent, AppModule } from '@app/core';

@NgModule({
    imports: [
        BrowserModule,
        FormsModule,
        AppModule
    ],
    bootstrap: [
        AppComponent
    ]
})
export class CustomModule { }

AppComponent看起来像这样：

import { Component, OnInit, ViewEncapsulation } from '@angular/core';

@Component({
    selector: "app",
    styleUrls: ['./../assets/scss/style.scss'],
    encapsulation: ViewEncapsulation.None,
    templateUrl: "./app.component.html"
})
export class AppComponent implements OnInit {    

    constructor() { }

    ngOnInit() { }   

}

请注意，ViewEncapsulation设置为None，以使此组件的样式为全局。这在原始应用程序中按预期工作。但是，只要从应用程序创建包并将其作为自定义应用程序的依赖项安装，这些样式就不再全局应用。我可以在生成的.js文件中看到它们，但它们并未应用。

摘录自已编译的.js文件：

var AppComponent = (function () {
    function AppComponent() {
    }
    /**
     * @return {?}
     */
    AppComponent.prototype.ngOnInit = function () {
    };
    return AppComponent;
}());
AppComponent.decorators = [
    { type: Component, args: [{
            selector: 'app',
            styles: ["GLOBAL_STYLES_ARE_HERE"],
            encapsulation: ViewEncapsulation.None,
            template: "<router-outlet></router-outlet>"
        },] },
];

我在这里遗漏了什么吗？当我使用AppComponent来引导另一个应用程序时，为什么这些样式不是全局的？提前谢谢！

Angular 4库中的全局样式

0 个答案: