Angular2 路由器与 Material Design Lite 交互

Question

我遇到了 Angular2 路由器和 Material Design Lite (MDL) 动画之间的交互。 如果我在由 Angular2 中的<router-outlet>组件呈现的组件中创建一个<input>元素，MDL 无法正确处理我与它的交互（不显示焦点动画，不清除占位符文本，等等）。 另一方面，如果<input>出现在<router-outlet> ，则没有问题。

这似乎与<router-outlet>内容的动态性质有关。 我以为这会解决问题。 我向我的应用程序（甚至是扩展RouterOutlet自定义指令）添加了一个ngAfterViewInit和ngAfterViewChecked处理程序。 没运气。 我可以看到componentHandler变量并调用updateDom方法...没问题。 但它没有效果。

必须有某种方法让 MDL“看到”这些动态创建的元素，但我对upgradeDom尝试没有奏效。 也许upgradeDom不是问题……但问题是什么。

有什么建议？

Answer 1

所以经过进一步挖掘，我以为我找到了解决方案。 使用plunkr我能够证明对componentHandler.<something>的正确手动调用可以解决我在该 plunkr 中设法设计的类似问题。

但是，那里的方法（创建一个自定义指令来触发对指令附加到的生命周期事件的调用）并没有解决我的问题。 router-outlet的“动态”性质仍然存在干扰。 据我所知，对componentHandler的调用还为时过早，并且在router-outlet真正更新 DOM 之前完成。

我最终要做的是在RouterOutlet的activate方法中添加一些代码。 我已经创建了一个自定义的RouterOutlet类，因此将代码粘贴到activate方法中非常简单。

但是，我发现必须等到与activate方法关联的Promise被解析。 所以我做了这样的事情：

declare var componentHandler: any;

...
export class MyRouterOutlet extends RouterOutlet {
  ...
  activate(instruction: ComponentInstruction) {
    // My custom activate stuff (i.e., check that user is
    // authorized to view this content)

    // Important part, call base class...
    return super.activate(instruction)
       .then((x) => {
          componentHandler.upgradeDom();
          return x;
       });
  }
}

更新：

我还没有确认，但我怀疑我提到的其他解决方案不起作用的原因是因为我遇到了另一个问题。 我的怀疑是，正确解决该问题会使我在此处引用的其他解决方案发挥作用。