如何在Angular 2中獲取組件的未編譯原始HTML內容？

我想在Angular 2中編寫一個組件來顯示和突出顯示HTML代碼。應該可以編寫HTML代碼而不需要使用<等標籤來轉義標籤。如何在Angular 2中獲取組件的未編譯原始HTML內容？

最後，我想編寫這樣的事：

<my-code-component> 
    <span (click)="test()">My test code</span> 
</my-code-component>

應該顯示在瀏覽器這樣的：

<span (click)="test()">My test code</span>

所以原始的HTML代碼應顯示爲是。

在角1，這樣做會在一個指令登記預compile功能，使之前它已被角編譯它可以獲取元素的內容的方式。在Angular 2中，我只能找到AfterViewInit，該代碼僅在代碼已編譯後執行，因此innerHTML中缺少(click)屬性。

在Angular 2中是否有這樣的預編譯函數？

我發現的另一件事是ngNonBindable屬性。它應該阻止Angular 2編譯元素。但是，即使像這樣測試：

<div ngNonBindable> 
    <span (click)="test()">My test code</span> 
</div>

不起作用。相反，它會拋出大量InvalidCharacterError: Failed to execute 'setAttribute' on 'Element': '(click)' is not a valid attribute name.錯誤，這似乎與DOM規範中的this bug有關。

這是Angular 2中的錯誤，還是我做錯了什麼？

來源

2016-03-10 cdauth

[ngNonBindable]（https://github.com/angular/angular/blob/master/modules/angular2/test/common/directives/non_bindable_spec.ts）似乎只適用於插值。它看起來像試圖編譯它不應該的東西，我的意思是，如果你把它放在ngNonBindable中，angular2不應該關心它，不應該拋出。所以我不能肯定地說，也許你可以要求它作爲一個功能。 –

其實(click)不是一個有效的屬性名稱，至少在Chrome中不能添加名爲(click)的屬性。因此，這隻適用於Angular預處理HTML並在將模板添加到DOM之前解析綁定。

來源

2016-03-10 15:16:31

'（click）'是一個有效的屬性名稱[由HTML標準]（https://www.w3.org/TR/html5/syntax.html#attributes-0）（另見[here]（http：/ /stackoverflow.com/questions/925994/what-characters-are-allowed-in-an-html-attribute-name）），它只是'setAttribute（）'（其[[標準]（https： //dom.spec.whatwg.org/#dom-element-setattribute）引用[XML標準]（https://www.w3.org/TR/xml/#NT-Name））。 – cdauth

這就是我記得的，但我無法將其添加到Chrome devtools中。 Chrome剛剛刪除它。 –

如何在Angular 2中獲取組件的未編譯原始HTML內容？

回答

相關問題