维也纳展期要点

在您的 Angular 应用程序中, 懒惰地装入 Angular Elements 或任何其他网络组件的简单方式 !

以 @tomastrajan (英语)

文档

• 文档
• 开始
• 使用大小写
• 财务问题
• API 密码
• 实例
• 博客文章
• 专题演讲(视频)

快速启动

1. 安装 npm i @angular-extensions/elements
2. 添加 import { LazyElementDirective } from '@angular-extensions/elements'· ;
3. 附录 LazyElementDirective 页:1 imports: [] 您的电话 MyOrgComponent
4. 添加新内容 schemas: [] 属性为 CUSTOM_ELEMENTS_SCHEMA 值为 @Component 您的装饰器 MyOrgComponent
5. 使用 *axLazyElement 关于您想要在元素捆绑的url中装入并传递的元素的指令

构成部分实施实例

import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { LazyElementDirective } from '@angular-extensions/elements';

@Component({
  selector: 'your-org-feature',
  imports: [LazyElementDirective],
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  template: `
    <!-- will be lazy loaded and uses standard Angular template bindings -->
    <some-element
      *axLazyElement="elementUrl"
      [data]="data"
      (dataChange)="handleChange($event)"
    ></some-element>
  `,
})
export class MyOrgComponent {
  elementUrl = 'https://your-org.com/elements/some-element.js';

  data: SomeData;

  handleChange(change: Partial<SomeData>) {
    // ...
  }
}

支持的角版本

图书馆用下列版本的Angular进行了测试,意在使用 与相应的主要版本("@angular/core"": "^15.0.0" 与 "@angular-extensions/elements": "^15.0.0" ) (中文(简体) ).

• 9.x(全IVY支持,使用制造器对安全部门改革非常小心)
• 8.x (部分IVY支持, axLazyElement 工作不过 axLazyElementDynamic 与IVY无关)
• 7.x 电话
• 6.x (例如: npm i @angular-extensions/elements@^6.0.0(中文(简体) )

内部解析图

成为贡献者

缺少一个功能, 在文档中找到错误或打字吗 ?

请随便开张吧 问题 或提交 拉动请求 让这个项目变得更好

托马斯·特拉扬 💻 🎨 💡 📖 🤔 🚇 ⚠️	阿图尔·安德罗索维奇 💻 🐛	韦恩·莫雷尔 🐛 💻	桑托什·亚达夫 💻 📦	戴维·达尔·布斯科 💻 💡	扎马汗·穆罕默德 💻 🤔 ⚠️
天使弗拉加·帕罗迪 💡 🤔	对啊 💻 🤔	沙克瑙河畔沙克瑙 💻 🤔	费利佩·普莱茨 💻 🎨 💡 📖 🤔 ⚠️	库比谢夫斯基 💻	沙克瑙河畔沙克瑙 💻
纳戈尔诺-亚历山大 💻	约瑟夫·戴维斯 💻	阿罗巴·沙胡尔 💻	马克西米利安·赖特 📖	雅库布·斯塔维阿尔斯基 💻	库比亚克 💻
埃戈尔·沃尔瓦乔夫 💻	丹尼尔·布 💻

发起人

您现在正在一个 企业多雷波环境 并且发现自己认为你能够提供如此多的价值 除非你有更好的总体规划 跟踪进展 并且把事情做好?

尝试 倾斜板,是主要软件工程师和建筑师的最佳工具 帮助他们获得一个概览 驱动更改 企业多雷波环境 通过查询和追踪他们的代码基础!

免费计划让你用第一个仪表板 来全面概述你的所有项目 追踪到三个不同的东西!