添加自定义元素和属性编译器架构

有一些自定义元素和组件模板（在这个例子中，他们是由第三方非角代码中使用）属性：添加自定义元素和属性编译器架构

<foo></foo> 
<div data-bar="{{ bar }}"></div>

他们导致编译器错误：

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> 
    "): [email protected]:4 
Can't bind to 'bar' since it isn't a known property of 'div'. (" 
    <foo></foo> 
    <div [ERROR ->]data-bar="{{ bar }}"></div> 
    ") 
...

如何foo元素和属性data-bar被添加到编译器架构？

NO_ERRORS_SCHEMA不是一种选择，因为不希望将其他未知元素和属性列入白名单。

来源

2017-03-22 estus

你可以尝试重写DomElementSchemaRegistry这样的：

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

Plunker Example

来源

2017-03-25 05:30:50 yurzui

谢谢，好的！我很确定DomElementSchemaRegistry类是内部的。顺便说一句，它必须是'!!（elementProperties && elementProperties [propName]）'。 – estus

看起来不错，但通知你Plunker例，在标记的股利是如下：

data-bar="{{ bar }}"

bar being =“test”正在输出，如下所示：

<div></div>

，而不是

<div data-bar="test"></div>

如果你想呈现的属性 - 比如你可以用下面的聚合物组分。

[attr.data-bar]="bar" in the markup

来源

2017-04-13 15:39:01

我不确定你的意思，但是如果你建议data-bar =“{{bar}}”'可以用'data-bar =“test”替换'，那么不行，这是不可能的 - 问题的关键在于自定义属性是如何动态的。在示例中'bar'不会改变，但这是为了简单起见。 – estus

{{bar}}是@yurzui示例中属性数据栏的动态值。我的问题是要在DOM上呈现该属性并设置它的值，而不仅仅是让

呈现 –

对不起 - 不知道 - 得到它 - [attr.data-bar] =“bar”，并且angular将能够动态设置attr如果您不想像所说的使用CUSTOM_ELEMENTS_SCHEMA来启用所有元素，则上面的示例很有用 –

添加自定义元素和属性编译器架构

回答

相关问题