角度2 | MDLコンポーネントを動的に作成する

Question

MDL Webサイト：http://www.getmdl.io/started/index.html#dynamicを参照すると、次の機能を使用することをお勧めします。componentHandler.upgradeElement（ctrlNode）;コンポーネントが動的に追加されたときしかし、私のシナリオでは、Angular 2を使用してコンポーネントを動的に作成しています。ページが読み込まれた後に親が既にアップグレードされているため、アップグレードは「子」に対しては機能しません。

upgradeAllRegistered（）またはupgradeDom（）を使用しても、同じ理由で新しい要素は通過しません。

"data-upgraded"というクラス/属性を削除して回避策を見つけることができました。しかし、メモリのリークを引き起こす可能性があるので、私はこの解決策にはあまり慣れていません。

ご迷惑をおかけして申し訳ありません。

ありがとうございます。

オマール

Answer 1

短い答え：あなたは公式material2角度チームにより提供を検討することができます。

長い答え：一般的に

、Angular2でネイティブDOMに触れることは推奨されません。 Angular2は、プラットフォームに依存しない、dom-trasnparentフレームワークであるように設計されています。開発者は、変更検出、DOM操作、ビューデータ同期などを提供するために多大な努力をしているため、Angular2のネイティブ要素を気にする必要はないし、そうしないでください。

MDLはDOMベースのライブラリですが、 anglejsよりもブートストラップに似ています。

したがって、これらの2つは本質的に互いに互換性がありません。あなたがMDLでスタイルを使っているだけなら、それは並行して機能するかもしれません。しかし、MDLのJavaScriptは、独自のコンポーネントを作成するために多くの努力をしない限り、Angularではうまく動作しません。

Answer 2

上記の同じシナリオでは、親子コンポーネントのそれぞれにOnInitインターフェイスを実装し、ライフサイクルフックメソッドngOnInit()を使用してcomponentHandler.upgradeAllRegistered();を呼び出すことでこれを行いました。私のソースからのサンプル： のDashBoardコンポーネント（親）

@Component({ 
    templateUrl : './app/dash/dashboard.html', 
    directives : [ROUTER_DIRECTIVES,MenuComponent], 
    Encapsulation : ViewEncapsulation.NONE 
}) 


    export class DashBoard implements OnInit{ 
     userFullname : string; 
     imagePath : string; 

     constructor(private _router : Router){} 

     ngOnInit() { 
      this.imagePath = 'app/dash/avatar.png'; 
      componentHandler.upgradeAllRegistered(); 
      this.userFullname = localStorage.getItem('user'); 
     } 
    } 

その後Menuコンポーネント（子）

@Component({ 
    selector : 'menu-pane', 
    templateUrl : './app/dash/menu/menu.html', 
    providers : [HTTP_PROVIDERS,MenuService], 
    directives : [ROUTER_DIRECTIVES] 
}) 

export class MenuComponent implements OnInit{ 
    routesReady : boolean; 

    routerView : any[]; 
    constructor(private menuServ : MenuService, private _router : Router){} 

    ngOnInit(){ 
     componentHandler.upgradeAllRegistered(); 
     this.routerView = []; 
    } 
} 

私はスニペットを把握する少し混乱していると思いますが、あなたすべてのコンポーネントのngOnInit（）のメソッドを単に呼び出すことができます