Question

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

<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); 
    };
};

my-element.component.html

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

my-element.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
    };
};

因此，我将第3方npm日历角度组件导入了在静态网页中注入的angular元素中。

日历已呈现并实例化，但是它不适用于CSS，因此无法按预期工作。

For example this ui-calendar class, it is there but isn't applied

问题出在哪里？

Answer 1

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

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

使用此示例：

high

如何在Angular元素中使用Angular Component？

1 个答案: