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;
       });
  }
}

更新：

我還沒有確認，但我懷疑我提到的其他解決方案不起作用的原因是因為我遇到了另一個問題。 我的懷疑是，正確解決該問題會使我在此處引用的其他解決方案發揮作用。