如何在 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 中封装动态添加的元素? 的相关文章

  • 为 Angular2 中的组件加载多个样式表

    我正在构建一个 angular2 应用程序 当我尝试为同一组件加载多个样式表时 我面临多个问题 这是我正在做的代码 import Component from angular core Component selector my tag t
  • 如何使用 Angular CLI 在特定文件夹中生成组件?

    我将 Angular 4 与 Angular CLI 结合使用 并且可以使用以下命令创建一个新组件 E HiddenWords gt ng generate component plainsight 但我需要在 plainsight 中生成
  • 控制台未打开时无法加载资源:net::ERR_EMPTY_RESPONSE

    我正进入 状态 Failed to load resource net ERR EMPTY RESPONSE 如果控制台未打开 我的 api 调用会出错 然而如果控制台打开 则 api 调用工作正常 前端使用 Angular2 后端使用 N
  • 当没有结果返回时,如何防止 Angular 异步管道频繁进行服务器调用?

    我正在使用async通过管道传入 ngFor 来观察 Observable Observable 是由访问我的服务器的服务创建的 并且在枚举 ngFor 循环时的加载时间 该服务正确地调用服务器 现在对于我不明白的部分 当任何结果返回时 一
  • 在 Y 轴上显示时间 - 气泡图

    我碰到Bubble Chart 最新补充 在ng2 图表 https valor software com ng2 charts 我试图根据 Y 轴的时间和 X 轴的值显示数据 我的数据就像 x 10 35 60 和 y 7 00 AM 和
  • 在 Angular 5 中使用 jquery 插件

    我正在尝试在 Angular 5 项目中使用以下日期选择器 但我不确定如何导入它 https bootstrap datepicker readthedocs io en latest index html https bootstrap
  • Jhipster 生成器跳过 --skip-server 处的身份验证代码

    为什么当我们使用 skip server 生成项目时 哟 jhipster skip server 部分身份验证丢失 在 AJS A2 上 是吗 每次我需要粘贴部分代码 Angular 上的 AuthServerProvider 或 Ang
  • 如何导航到 Angular 7 中的锚点

    我已经在routingModule和所有路径中启用了anchorScrolling 但是当我单击链接时没有任何反应 nav bar component html div class sidenav a href class closeBtn
  • ionic 2 本地存储无法将检索到的值设置为变量

    我试图将从 get 函数检索到的值设置为在外部声明的变量 但无法这样做 var dt retrieve this local get didTutorial then value gt alert value dt value consol
  • RxJ 从 observable 中获取价值

    在组件中 singleEvent Observable
  • 表单提交后 Angular2 更新视图

    我正在使用 Angular2 创建一个简单的 CRUD 应用程序 该应用程序由一个列出当前记录的表格和一个用于提交新记录的表格组成 提交表单后更新表格以反映新记录的正确方法是什么 这是我到目前为止所拥有的 export class Pers
  • 以嵌套反应形式使用 setControl

    我想知道当我在另一个 formBuilder 组中有一个数组时 我必须做什么才能以反应形式使用 setControl 和 get 例如 this formulario this formBuilder group title this ra
  • Angular 2 中的变更检测

    我正在将角度 1 和角度 2 集成在一起 因此我有角度 1 控制器和服务以及角度 2 组件 这些对于数据检索和存储来说工作得很好 反之亦然 下面是我的 html 页面 h3 Angular 1 service h3 div div
  • 根据 main.ts 中的 URL 引导多个或单个模块

    我正在使用一个 NET Framework MVC Web项目 该项目无法完全转移到完整的角度项目 因此我无法使用角度的路由来延迟加载 但我也不想加载使用角度组件的所有内容 这是一个企业解决方案 要说 嘿 让我们充分利用 Angular 并
  • 在 .NET Core 中为 SPA 生成角度包时如何解决错误失败?

    当我执行该应用程序时 我收到两个红色失败消息 如下所示 通常 当类型或其他方面出现错误时 失败 Microsoft AspNetCore SpaServices 0 生成浏览器应用程序包 失败 Microsoft AspNetCore Sp
  • 在 Angular 6 表单生成器中找不到具有未指定名称属性的控件

    当尝试使用 HTML 文件更新网格表时 我收到此错误消息 在这里 我使用了静态数据来显示表格 并从显示 primeng 表的其他组件导入 并且我添加了一个更新按钮 该按钮具有重定向到另一个页面以更新数据的功能 该问题出现在 HTML 文件的
  • Angular 6 + RxJS 6.0:如何将新元素推送到 Observable 包含的数组

    我从 firebase 服务器分块接收数据 同时渲染该数据需要一个坚持可观察包含数组的库 我不知何故无法将新的数据块推送到可观察到的现有数据块数组 从数据服务中 我通过主题的下一个调用并尝试添加新的 calEvent this homeWo
  • Angular 2 - 内容未加载到路由器插座中

    我对 Angular 2 还是很陌生 希望你们能帮助我 我有一个相当简单的应用程序 有一个登录页面 成功登录后用户将被定向到带有侧菜单的页面 登录屏幕没有此侧边菜单 当用户注销时 他会再次被引导至登录页面 问题是登录后侧菜单变得可见 但其他
  • 用输入字段 Javascript/Angular2 替换某些单词

    我有一根绳子 我喜欢橙色 蓝色 黑色 粉色 玫瑰色 黄色 白色 黑色 是否可以用输入字段替换黄色和黑色 以便我可以输入自己的颜色 const a string I like orange blue black pink rose yello
  • Angular2 中自定义指令和组件之间的通信

    我有一个模板 其中包含文本框 一个 span 标签和一个 div 标签 div 标签具有 selectedColor 自定义指令 我想在输入值更改时更改 span 和 div 标签的背景颜色 所以最后我希望我的指令对输入更改做出反应并设置

随机推荐