angular - 如何在 Angular 2 中封装动态添加的元素？

Question

尝试使 MDL 与 Angular2 一起工作。

通过影子 DOM 模拟，angular 封装了它从代码中获得的所有 css 和 html。但是当我使用 componentHandler.upgradeElement() 时，它会创建没有封装的新元素。

我应该怎么做才能让它也封装起来？

Answer 1

添加这个简单的指令 mdl 元素!

import {Component, ElementRef } from 'angular2/core';
declare var componentHandler: any;


@Component({
    selector: '[mdl]',
    template: `<ng-content></ng-content>`
})



    export class MdlComponent {

    constructor(public el: ElementRef) {

        MdlComponent.mdlWrapper(el);

    }

    static mdlWrapper(element: ElementRef) {

        componentHandler.upgradeElement(element.nativeElement);
    }
}