添加自定義元素和屬性編譯器架構

有一些自定義元素和組件模板（在這個例子中，他們是由第三方非角代碼中使用）屬性：添加自定義元素和屬性編譯器架構

<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來啓用所有元素，則上面的示例很有用 –

添加自定義元素和屬性編譯器架構

回答

相關問題