Question

参考MDL网站：http://www.getmdl.io/started/index.html#dynamic建议使用该功能：componentHandler.upgradeElement（ctrlNode）;何时动态添加组件。但是，在我的场景中，我使用Angular动态创建组件。升级不适用于儿童＆＃34;因为在加载页面后父级已经升级。

即使使用upgradeAllRegistered（）或upgradeDom（），它也不会出于同样的原因通过新元素。

我可以通过删除类/属性＆＃34;数据升级＆＃34;找到解决方法。但是，我对这个解决方案不太满意，因为它可能会导致内存泄漏。

非常感谢任何帮助。

感谢;

奥马

Answer 1

简答：您可以考虑Angular团队提供的官方material2。

答案很长：

通常，不建议在Angular2中触摸原生dom。 Angular2旨在成为一个平台无关的，透明的框架。开发人员不需要也不应该关心Angular2中的本机元素，因为它在提供变更检测，dom操作，视图数据同步等方面做了很多工作。

虽然MDL是一个基于dom的库，但它更像是bootstrap而不是angularjs。

所以，这两者本质上并不相互矛盾。如果您只是在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');
        }
    }

然后菜单组件（儿童）

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

角度|动态创建MDL组件

2 个答案: