Как использовать угловой компонент в угловом элементе? - PullRequest
Новая
       35

Как использовать угловой компонент в угловом элементе?

0 голосов
/ 03 апреля 2019

У меня есть статическая страница, на которую я импортировал свой пользовательский угловой элемент 

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

Итак, у меня есть сторонний угловой компонент npm, импортированный в угловой элемент, который вставляется в статическую веб-страницу.

Календарьрендерится и создается, но он не применяет его CSS, и, следовательно, не работает должным образом.

Например, этот класс пользовательского интерфейса, он есть, но не применяется

В чем проблема?

1 Ответ

1 голос
/ 16 мая 2019

Попробуйте поиграть с ViewEncapsulation в None или Native в зависимости от того, что вы хотите.

Взгляните на этот ответ: https://stackoverflow.com/a/55735139/11448530

Используя это, например: 

platformBrowserDynamic().bootstrapModule(AppModule, [
  {
      defaultEncapsulation: ViewEncapsulation.Native 
  }
])
...