0

我有静态页面，我在其中导入了自定义的角度元素

<html>
    <head>...</head>
    <body>
        <my-element></my-element>
        <script src="elements.js"></script> 
    </body>
</html>

app.module.ts

import { NgModule, Injector } from '@angular/core';  
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { createCustomElement } from '@angular/elements';
import { CalendarModule } from 'primeng/calendar';
import { MyElementComponent } from './my-element.component'; 

@NgModule({
    imports        : [
        BrowserModule,
        BrowserAnimationsModule, 
        CalendarModule
    ], 
    declarations   : [
        MyElementComponent
    ],
    entryComponents: [ 
        MyElementComponent  
    ] 
})

export class AppModule { 
    constructor(private injector: Injector) { };

    ngDoBootstrap() { 
        const customElement = createCustomElement(MyElementComponent, { injector: this.injector });

        customElements.define('my-element', customElement); 
    };
};

我的元素.component.html

<!--some HTML-->
    <p-calendar [touchUI]="true" #calendar></p-calendar>
<!--some HTML-->

我的元素.component.ts

import { Component, ViewChild } from '@angular/core'; 
import { Calendar } from 'primeng/calendar';

@Component({ 
    templateUrl  : './my-element.component.html',
    styleUrls    : ['./my-element.component.css'] 
})

export class MyElementComponent { 
    @ViewChild('calendar') calendar: Calendar;

    ngAfterViewInit() {
        console.log(this.calendar); // OUTPUT OK/CALENDAR INSTANTIATED
    };
};

因此，我在 angular 元素中导入了第三方 npm 日历角度组件，该组件被注入到静态网页中。

日历被渲染和实例化，但它没有应用它的 css，因此没有按预期工作。

例如这个 ui-calendar 类，它存在但未应用

问题出在哪里？

4

1 回答 1

0

根据您的需要，尝试将 ViewEncapsulation 设置为 None 或 Native。

看看这个回复： https ://stackoverflow.com/a/55735139/11448530

以此为例：

platformBrowserDynamic().bootstrapModule(AppModule, [
  {
      defaultEncapsulation: ViewEncapsulation.Native 
  }
])
于 2019-05-16T07:24:52.020 回答