MDL 和 Angular2 2.0.0-rc.1
MDL and Angular2 2.0.0-rc.1
我正在努力让 Material Design Lite (MDL) 与 2.0.0-rc.1 版本的 Angular2 一起工作，特别是动态内容。
我有两个组件，一个是包含第二个组件的主要应用程序组件。我可以将 HTML 放入主要组件的模板中，使用 MDL 类，拥有组件 implement OnInit 并从那里调用 componentHandler.upgradeDom()。到目前为止添加的所有 HTML 现在都由 MDL 注册。
然而，当我让第二个组件使用 service 并将结果动态添加到其模板中时，第一个 componentHandler.upgradeDom() 不会注册这些内容。我不明白为什么在添加动态内容后从第二个组件调用 componentHandler.upgradeDom() 也不起作用。我认为应该。它使用不同的 componentHandler 还是什么？
另一个想法是让第二个组件以某种方式调用第一个组件的函数，告诉它使用它的 componentHandler 并从那里更新 DOM，但我不知道怎么做。
出于测试目的，我添加了一个本机 Javascript 文件，该文件调用完全相同并有一个按钮触发它 - 有效。
我在 Whosebug 上发现了几个指令，这些指令据说可以自动注册所有新的 HTML，但 none 对我有用。有谁知道如何为这个版本的 Angular2 做这个？
我正在使用此处找到的指令来调用 componentHandler.upgradeAllRegistered();：
为了使组件 CSS 正常工作，您还需要在组件上设置 encapsulation:ViewEncapsulation.None（执行 import {Component, ViewEncapsulation} from '@angular/core';）
您可能还需要将 ElementRef 注入组件，然后在其上显式调用 componentHandler.upgradeElement。 （这对我不起作用，但我看到它在一些示例中起作用。）结帐：
不幸的是，theUtherSide 的回答对我也不起作用。
我的错误是针对我的项目的。我正在添加动态内容并告诉 componentHandler.upgradeDom(); 但由于 CSS 将其设置为 [=11]，它不适用于当时 不可见 的内容=].这对我的项目来说是正确的，它会在单击时更改这些设置以使它们对用户可见。显然这就是 upgradeDom() 函数忽略它的原因。
我在我的代码中的其他地方添加了相同的功能 - 基本上，当我加载内容时，我将一个布尔值设置为 true，表示它已更改。当用户使这样一个隐藏部分可见并且该布尔值为真时，将调用该函数并将布尔值设置为假，因此不会每次都发生这种情况。
也许其他人在同一个地方。这当然不是最好的解决方案，必须检查这些东西等等，但是嘿，它有效。
编辑
其实我不是 100% 肯定是因为有问题的内容 隐藏 ，也许我只是调用函数 太早了 。可能也想检查一下。
我正在努力让 Material Design Lite (MDL) 与 2.0.0-rc.1 版本的 Angular2 一起工作，特别是动态内容。
我有两个组件，一个是包含第二个组件的主要应用程序组件。我可以将 HTML 放入主要组件的模板中，使用 MDL 类，拥有组件 implement OnInit 并从那里调用 componentHandler.upgradeDom()。到目前为止添加的所有 HTML 现在都由 MDL 注册。
然而，当我让第二个组件使用 service 并将结果动态添加到其模板中时，第一个 componentHandler.upgradeDom() 不会注册这些内容。我不明白为什么在添加动态内容后从第二个组件调用 componentHandler.upgradeDom() 也不起作用。我认为应该。它使用不同的 componentHandler 还是什么？
另一个想法是让第二个组件以某种方式调用第一个组件的函数，告诉它使用它的 componentHandler 并从那里更新 DOM，但我不知道怎么做。
出于测试目的，我添加了一个本机 Javascript 文件，该文件调用完全相同并有一个按钮触发它 - 有效。
我在 Whosebug 上发现了几个指令，这些指令据说可以自动注册所有新的 HTML，但 none 对我有用。有谁知道如何为这个版本的 Angular2 做这个？
我正在使用此处找到的指令来调用 componentHandler.upgradeAllRegistered();：
为了使组件 CSS 正常工作，您还需要在组件上设置 encapsulation:ViewEncapsulation.None（执行 import {Component, ViewEncapsulation} from '@angular/core';）
您可能还需要将 ElementRef 注入组件，然后在其上显式调用 componentHandler.upgradeElement。 （这对我不起作用，但我看到它在一些示例中起作用。）结帐：
不幸的是，theUtherSide 的回答对我也不起作用。
我的错误是针对我的项目的。我正在添加动态内容并告诉 componentHandler.upgradeDom(); 但由于 CSS 将其设置为 [=11]，它不适用于当时 不可见 的内容=].这对我的项目来说是正确的，它会在单击时更改这些设置以使它们对用户可见。显然这就是 upgradeDom() 函数忽略它的原因。
我在我的代码中的其他地方添加了相同的功能 - 基本上，当我加载内容时，我将一个布尔值设置为 true，表示它已更改。当用户使这样一个隐藏部分可见并且该布尔值为真时，将调用该函数并将布尔值设置为假，因此不会每次都发生这种情况。
也许其他人在同一个地方。这当然不是最好的解决方案，必须检查这些东西等等，但是嘿，它有效。
编辑 其实我不是 100% 肯定是因为有问题的内容 隐藏 ，也许我只是调用函数 太早了 。可能也想检查一下。