Hay algunos elementos y atributos personalizados en la plantilla del componente (en este ejemplo, son utilizados por código no angular de terceros):
<foo></foo> <div data-bar="{{ bar }}"></div>Provocan un error del compilador:
Template parse errors: 'foo' is not a known element: 1. If 'foo' is an Angular component, then verify that it is part of this module. 2. If 'foo' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message. (" [ERROR ->]<foo></foo> <div data-bar="{{ bar }}"></div> "): App@1:4 Can't bind to 'bar' since it isn't a known property of 'div'. (" <foo></foo> <div [ERROR ->]data-bar="{{ bar }}"></div> ") ... ¿Cómo se pueden agregar el elemento foo y el atributo data-bar al esquema del compilador?
NO_ERRORS_SCHEMA no es una opción porque no es deseable que otros elementos y atributos desconocidos se incluyan en la lista blanca.
Puede intentar anular DomElementSchemaRegistry de esta manera:
import { DomElementSchemaRegistry, ElementSchemaRegistry } from '@angular/compiler' import { SchemaMetadata } from '@angular/core'; const MY_DOM_ELEMENT_SCHEMA = [ 'foo' ]; const MY_CUSTOM_PROPERTIES_SCHEMA = { 'div': { 'bar': 'string' } }; export class CustomDomElementSchemaRegistry extends DomElementSchemaRegistry { constructor() { super(); } hasElement(tagName: string, schemaMetas: SchemaMetadata[]): boolean { return MY_DOM_ELEMENT_SCHEMA.indexOf(tagName) > -1 || super.hasElement(tagName, schemaMetas); } hasProperty(tagName: string, propName: string, schemaMetas: SchemaMetadata[]): boolean { const elementProperties = MY_CUSTOM_PROPERTIES_SCHEMA[tagName.toLowerCase()]; return (elementProperties && elementProperties[propName]) || super.hasProperty(tagName, propName, schemaMetas); } } platformBrowserDynamic().bootstrapModule(AppModule, { providers: [{ provide: ElementSchemaRegistry, useClass: CustomDomElementSchemaRegistry }] });Se ve bien, pero observe en su ejemplo de Plunker, el div en el marcado es el siguiente:
data-bar="{{ bar }}"bar being = "test" se emite en el dom como:
<div></div>y no
<div data-bar="test"></div>Si desea que se represente el atributo, por ejemplo, para los componentes de polímeros, puede usar lo siguiente.
[attr.data-bar]="bar" in the markupInyectar CustomDomElementSchemaRegistry funciona ahora un poco diferente:
compilador JIT
El inyector ha cambiado desde la respuesta anterior, por lo que la firma de tipo cambió muy poco. A partir de la versión 5, StaticInjector necesita la matriz deps con useClass (Angular 8.2)
platformBrowserDynamic().bootstrapModule(AppModule, { providers: [ { provide: ElementSchemaRegistry, useClass: CustomDomElementSchemaRegistry, deps: [] } ] } );compilador AOT
NO podemos usar el inyector para la compilación anticipada, pero existe la posibilidad de "parchear" la clase DomElementSchemaRegistry antes de que el compilador la instancia, para obtener una descripción detallada, verifíquela aquí:
https://medium.com/angular-in-depth/angular-elementschemaregistry-for-dummies-83d54cd31478