如何在 Angular 2 中封装动态添加的元素?

2024-05-05

尝试让 MDL 与 Angular2 一起工作。

通过 Shadow DOM 模拟,Angular 封装了从代码中获得的所有 CSS 和 html。但是当我使用componentHandler.upgradeElement(),它创建没有封装的新元素。

我应该怎么做才能使其也被封装?


添加这个简单的指令 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);
    }
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何在 Angular 2 中封装动态添加的元素? 的相关文章

  • 如何在 TypeScript 中禁用/抑制库中的错误?

    我打开了一些编译器开关来报告代码中的更多问题 例如严格的空检查 但我在使用的库中遇到了数十个错误 例如 default xxx node modules angular core src util decorators d ts 11 5
  • Angular2 与 Jquery-ui 滑块

    我尝试将 Jquery ui 滑块与 angular2 一起使用 我想让变量 slideValue 显示滑块的值 但我不知道如何将我的模型或变量从角度绑定到滑块 这是我的滑块组件 import Component ElementRef In
  • MatAutocomplete 值 X 显示

    我的自动完成显示具有以下定义的对象的值 export class Person id number name string cityName string 这是自动完成模板
  • Angular2:鼠标事件处理(相对于当前位置的移动)

    我的用户应该能够通过鼠标在画布中移动 或旋转 对象 当鼠标事件发生时 屏幕坐标用于计算与最后一个事件的增量 方向和长度 没什么特别的 mousedown 获取第一个坐标 mousemove 获取第n个坐标 计算deltaXY 按deltaX
  • 修剪日期格式 PrimeNG 日历 - 删除时间戳、角度反应形式

    我将以下内容推入我的反应形式 obj 中2016 01 01T00 00 00 000Z但我想要以下2016 01 01 有谁知道有一个内置函数可以实现上述目的 我已经搜索过文档here https www primefaces org p
  • Angular2 Router:将主题标签添加到 url

    我正在使用 Angular2 Seed 应用程序 您可以在官方仓库 https github com mgechev angular2 seed 正如您所看到的 这里我们导入了 angular2 router 并且我们使用它来创建应用程序的
  • Angular 2 ngModel 不工作(仅限 javascript)

    所以我是 Angular2 javascript 的新手 我能够通过 5 分钟的 Angular 教程制作一个简单的 Hello world 我对 Angular2 的新变化很好奇 我开始阅读 Angular2 Js 文档 但我发现它不完整
  • 资产未考虑基本 href url - 未找到错误

    我刚刚在 Webform 项目中复制了 Angular 构建脚本 并将该项目部署到 IIS 中 注意 我只复制了脚本文件 没有单独部署在 IIS 中 我已将 Angular dist 文件夹复制到 Webform 项目的 Scripts 文
  • 如何转义角度 HttpParams?

    在 Angular 服务中 我使用 HttpParams 将字符串发送到服务 get phone string Observable
  • Angular 2 重复标头

    使用时出现重复标头问题
  • Angular2 与 ASP.NET 5 [关闭]

    Closed 此问题正在寻求书籍 工具 软件库等的推荐 不满足堆栈溢出指南 help closed questions 目前不接受答案 我正在将 Angular2 与 ASP NET5 gulp 和 typescript 结合使用 当我解决
  • 创建 AoT 兼容的服务工厂

    我正在尝试为缓存服务创建一个服务工厂 主要要求是每次可以使用不同的字符串实例化单个服务 最终的结果会有多个cache每个服务都由唯一定义databaseName 每个缓存可以有一个或多个stores也由唯一定义storeName 其他服务将
  • 如何禁用 ng2-dragula 上的某些元素的拖动

    我想在顶部显示名称组并取消其上的拖动事件 如何禁用移动某些元素 例如该组名称位于顶部 我的代码是 dragulaService drag subscribe value gt console log drag value 0 我的模板 di
  • 如何在角度材料的下拉菜单中显示表单?

    我想展示一个简单的form 如下图所示 作为dropdown当icon被点击 我查看了角材料的组件列表 但找不到任何合适的组件 有menu https material angular io components menu overview
  • Angular 2 获取当前路线

    所以我需要以某种方式检查我是否在主页上执行某些操作 而在其他页面上则不执行此操作 该组件也在所有页面上导入 如果我在主页上 如何检测该组件 Thanks 尝试这个 import Router from angular router expo
  • 在 Fabric.js 中按宽度/高度在另一个画布对象内居中和缩放画布对象

    Goal 将一个对象 水平和垂直 置于另一个对象 矩形或组 的中心canvas via Fabric js或者通过Javascript保持原始对象的长宽比相同 但也不超过父对象的宽度 高度比例 父对象 矩形或组 不会居中于canvas元素
  • 如何判断何时创建新组件?

    我一直在寻找背后的逻辑当有人在 AngularJS Angular 上的 Web 应用程序中创建新组件时但我认为这更通用 可能适用于所有基于组件的前端框架 我知道有像这样的一些原则应该是抽象的和可重用的但例如我在角度文档中看到 每个单独的路
  • Angular2 - 在反应表单上设置日期字段

    我有一个使用两个日期字段的组件 开始日期和结束日期 默认情况下 我禁用了结束日期字段 当他们选择开始日期时我会切换它 this transitionForm this fb group effectiveEndDate value disa
  • Angular 7:ng 测试挂起,不断重复运行测试

    我最近将 Angular 6 应用程序迁移到角7 my 包 json看起来像这样 name myApp version 3 0 0 license MIT scripts ng ng start ng serve public host h
  • angularfire 2:错误“未处理的承诺拒绝:TypeError:无法读取属性”

    我尝试了一个示例应用程序来连接到 Firebase 在我的 Main ts 中我这样写 import bootstrap from angular platform browser dynamic import enableProdMode

随机推荐