如何在Angular 2中封装动态添加的元素? [英] How to encapsulate dynamically added elements in Angular 2?

问题描述

试图使MDL与Angular2一起使用.

Trying to make MDL working with Angular2.

使用Shadow DOM仿真，Angular封装了从代码中获得的所有css和html.但是当我使用componentHandler.upgradeElement()时，它会创建没有封装的新元素.

With shadow DOM emulation angular encapsulates all css and html which it gains from code. But when I use componentHandler.upgradeElement(), it creates new elements with no encapsulation.

我也应该做些什么使它封装起来?

What should I do to make it encapsulated too?

推荐答案

添加此简单的指令mdl元素！

Adding this simple directive mdl element!

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

这篇关于如何在Angular 2中封装动态添加的元素?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！