Angular 2
Gebruik native webcomponenten in Angular 2

AngularJS CSS firebase HTML ionic2 ionic-framework JavaScript jQuery Node.js TypeScript
Zoeken…


Opmerkingen

Wanneer u een webcomponent in uw Angular 2-sjabloon gebruikt, probeert Angular een component te vinden met een selector die overeenkomt met de aangepaste tag van de webcomponent - wat het natuurlijk niet kan en een foutmelding geeft.

De oplossing is om een "schema met aangepaste elementen" te importeren in de module die het onderdeel bevat. Hierdoor kan hoekig elke aangepaste tag accepteren die niet overeenkomt met een ng-componentkiezer.

Neem schema met aangepaste elementen op in uw module

import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { CommonModule } from '@angular/common';
import { AboutComponent } from './about.component';

@NgModule({
    imports: [ CommonModule ],
    declarations: [ AboutComponent ],
    exports: [ AboutComponent ],
    schemas: [ CUSTOM_ELEMENTS_SCHEMA ]
})

export class AboutModule { }

Gebruik uw webcomponent in een sjabloon

import { Component } from '@angular/core';

@Component({
  selector: 'myapp-about',
  template: `<my-webcomponent></my-webcomponent>`
})
export class AboutComponent { }


Modified text is an extract of the original Stack Overflow Documentation
Licentie onder CC BY-SA 3.0
Niet aangesloten bij Stack Overflow