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.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。

Answer 2

不幸的是，UtherSide 的回答对我也不起作用。

我的错误非常具体到我的项目。我正在添加动态内容并告诉componentHandler.upgradeDom();，但由于CSS 将其设置为opacity: 0; max-height: 0，它不适用于当时不可见 的内容。这对于我的项目是正确的，它会在单击时更改这些设置以使它们对用户可见。显然这就是 upgradeDom() 函数忽略它的原因。

我在代码的其他地方添加了相同的功能 - 基本上，当我加载内容时，我将布尔值设置为 true，表示它已更改。当用户使这样的隐藏部分可见并且该布尔值为真时，则调用该函数并将布尔值设置为假，因此它不会每次都发生。

也许其他人在同一个地方。这当然不是最好的解决方案，必须检查这些东西等等，但是嘿，它有效。

编辑 实际上我并不是 100% 肯定这是因为相关内容被隐藏，也许我只是调用函数太早了。可能也想检查一下。