2017-03-22 96 views
3

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

<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不是一種選擇,因爲不希望將其他未知元素和屬性列入白名單。

回答

2

你可以嘗試重寫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

+0

謝謝,好的!我很確定DomElementSchemaRegistry類是內部的。順便說一句,它必須是'!!(elementProperties && elementProperties [propName])'。 – estus

1

看起來不錯,但通知你Plunker例,在標記的股利是如下:

data-bar="{{ bar }}" 

bar being =「test」正在輸出,如下所示:

<div></div> 

,而不是

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

如果你想呈現的屬性 - 比如你可以用下面的聚合物組分。

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

我不確定你的意思,但是如果你建議data-bar =「{{bar}}」'可以用'data-bar =「test」替換',那麼不行,這是不可能的 - 問題的關鍵在於自定義屬性是如何動態的。在示例中'bar'不會改變,但這是爲了簡單起見。 – estus

+0

{{bar}}是@yurzui示例中屬性數據欄的動態值。我的問題是要在DOM上呈現該屬性並設置它的值,而不僅僅是讓

呈現 –

+0

對不起 - 不知道 - 得到它 - [attr.data-bar] =「bar」,並且angular將能夠動態設置attr如果您不想像所說的使用CUSTOM_ELEMENTS_SCHEMA來啓用所有元素,則上面的示例很有用 –