MDL和Angular2 2.0.0-rc.1

Question

我很努力使Material Design Lite（MDL）與Angular2的2.0.0-rc.1版本一起工作，特別是動態內容。

我有兩個組件，一個是合併第二個的主要應用程序組件。我可以將HTML放入主要組件的模板中，使用MDL類，使組件implement OnInit從那裏調用componentHandler.upgradeDom()。迄今爲止添加的所有HTML現在都由MDL註冊。

但是，當我有第二個組件使用service並動態地將結果添加到其模板中時，則該東西不會被第一個componentHandler.upgradeDom()註冊。我不明白爲什麼在添加動態內容後第二個組件調用componentHandler.upgradeDom()不起作用。我認爲它應該。它使用不同的componentHandler什麼的？

另一個想法是讓第二個組件調用第一個組件的函數來告訴它使用它的componentHandler並從那裏更新DOM，但我不知道該怎麼做。

爲了測試目的，我添加了一個原生的Javascript文件，它調用了它，並且有一個按鈕觸發它 - 這是有效的。

我在StackOverflow上發現了幾個指令，它可以自動註冊所有新的HTML，但是沒有一個適合我。有沒有人知道如何爲這個版本的Angular2做到這一點？

Answer 1

不幸的是，他的答案也沒有奏效。

我的錯誤是非常具體的我的項目。我添加了動態內容並告知componentHandler.upgradeDom();，但由於CSS將其設置爲opacity: 0; max-height: 0，因此當時不可見的內容無效。這對我的項目來說是正確的，它會在點擊時改變這些設置，以便讓用戶看到它們。顯然這就是爲什麼upgradeDom()函數被忽略的原因。

我在我的代碼的其他地方添加了相同的功能 - 基本上當我加載內容時，我設置了一個布爾值爲true，表示它已經改變。當用戶使這個隱藏部分可見並且布爾值爲true時，則調用該函數，並將布爾值設置爲false，以便它不會每次都發生。

也許有人在同一個地方。這當然不是最好的解決方案，必須檢查這些東西和其他東西，但是，嘿，它的工作原理。

編輯 其實我不是100％肯定的，這是因爲有問題的內容是隱藏，也許我只是調用函數爲時尚早。可能也想檢查一下。

Answer 2

我用在這裏找到調用componentHandler.upgradeAllRegistered();指令： https://stackoverflow.com/a/35451821/1341825

爲了讓組件CSS工作，你還需要設置encapsulation:ViewEncapsulation.None您的組件（做import {Component, ViewEncapsulation} from '@angular/core';）

您可能還需要將ElementRef注入組件，然後在其上明確調用componentHandler.upgradeElement。 （這並沒有爲我工作，但我看到它在一些例子中工作。）結帳：

• https://gist.github.com/tbassetto/fa36518660cfcc7e0b62
• https://stackoverflow.com/a/35217588/1341825。