Angular 2 |動態創建MDL組件

參考MDL網站：http://www.getmdl.io/started/index.html#dynamic建議使用以下函數：componentHandler.upgradeElement（ctrlNode）;當組件動態添加時。但是，在我的場景中，我使用Angular 2動態創建組件。升級不適用於「子級」，因爲在加載頁面後父級已經升級。Angular 2 |動態創建MDL組件

儘管使用upgradeAllRegistered（）或upgradeDom（），但出於同樣的原因，它並沒有通過新的元素。

我可以通過刪除類/屬性「數據升級」來找到解決方法。但是，我不太喜歡這個解決方案，因爲它可能導致內存泄漏。

任何幫助，非常感謝。

謝謝;

奧馬爾

來源

2016-03-28 Omar AMRANI

簡短的回答：您可以考慮角團隊提供的官方material2。

龍答：

一般來說，不建議在Angular2觸及原生DOM。 Angular2被設計爲一個平臺不可知的，dom-trasnparent框架。開發人員不需要，也不應該關心Angular2中的native元素，因爲它在提供更改檢測，dom操作，視圖數據同步等方面做了很多工作。

雖然MDL是基於dom的庫，但它是更像自衛比angularjs。

所以，這兩者本質上並不是不相容的。如果您只是在MDL中使用樣式，它可能會同時工作。但是，除非您花費很多精力創建自己的組件，否則MDL中的JavaScript無法與Angular一起使用。

來源

2016-03-29 04:55:51

我同意！但是，Material2仍處於第一個開端，目前還沒有這樣的基本組件。我期待着Material2變得像Material1一樣豐富。 –

以上述相同的情況下，我不希望這使每個父 - 我的>子組件實現OnInit界面和使用的生命週期掛鉤方法ngOnInit()調用componentHandler.upgradeAllRegistered();。從我的源代碼示例： 儀表板式的組件（父）

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

然後菜單組件（子）

@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（）中調用方法

來源

2016-03-29 09:20:57

請不要這樣做。您可能會中斷更改檢測或查看封裝或其他內容。 –

Angular 2 |動態創建MDL組件

回答

相關問題