角 |动态创建 MDL 组件答案

【问题标题】：Angular | Create MDL component dynamically角 |动态创建 MDL 组件
【发布时间】：2016-07-16 07:44:21
【问题描述】：

参考MDL网站：http://www.getmdl.io/started/index.html#dynamic推荐使用函数：componentHandler.upgradeElement(ctrlNode);动态添加组件时。但是，在我的场景中，我正在使用 Angular 动态创建组件。升级不适用于“子级”，因为在页面加载后父级已经升级。

即使使用 upgradeAllRegistered() 或 upgradeDom() 也不会因为相同的原因遍历新元素。

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

非常感谢任何帮助。

谢谢；

奥马尔

【问题讨论】：

标签： angular typescript material-design

【解决方案1】：

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

长答案：

一般情况下，不建议在 Angular2 中触摸原生 dom。 Angular2 被设计成一个与平台无关的、dom-trasnparent 框架。开发者不需要也不应该关心 Angular2 中的原生元素，因为它在提供变更检测、dom 操作、视图数据同步等方面做了很多工作。

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

所以，这两者本质上并不矛盾。如果您只是在 MDL 中使用样式，它可能会协同工作。但是 MDL 中的 JavaScript 不能很好地与 Angular 配合使用，除非您付出很多努力来创建自己的组件。

【讨论】：

我同意！然而，Material2 仍处于起步阶段，还没有这样的基本组件。我期待着 Material2 变得和 Material1 一样丰富。

【解决方案2】：

在上述相同的场景中，我通过让每个父->子组件实现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 = [];
    }
}

我猜 sn-ps 有点难以理解，但你可以简单地调用每个组件的 ngOnInit() 中的方法

【讨论】：

请不要那样做。您可能会破坏更改检测或查看封装或其他内容。