问题标签 [angular-elements]

尝试使用@angular/elements. 似乎NgElement总是延伸HTMLElement。但我想延长HTMLButtonElement。一直在看createCustomElement'sstrategyFactory选项，但看不到我可以在哪里自定义它。

像这样注册组件：

运行此代码会引发异常

哪一个像往​​常一样NgElement扩展HMTLElement，有人知道扩展的方法HTMLButtonElement吗？

我正在尝试在我的角度自定义元素中使用 mat-dialog。我在 Angular 应用程序中工作正常，但在构建自定义元素时似乎无法捆绑材质主题。

当我在 Angular 应用程序之外检查代码时，没有任何样式附加到任何 cdk 类。在角度服务器中运行时，一切似乎都运行良好。如何在自定义元素中包含所需的 css？

我的 app.module 文件

和我的styles.css 文件

我的对话框应该有绝对定位，应该与窗口的中心对齐并且应该有一个背景。目前，这些都不适用于对话框

我在不同的 Angular 元素项目中开发了 2 个自定义元素，当我尝试在单个 html 中使用它们时，出现错误“无法在 'CustomElementRegistry' 上执行 'define'：此名称已与此注册表一起使用”如何点击此链接开发https://medium.freecodecamp.org/how-to-create-angular-6-custom-elements-web-components-c88814dc6e0a

我知道它与加载两个自定义元素中两次打包的库有关。如何解决这个问题？

谢谢

我尝试让 Angular Elements 在 IE11 中工作。我的自定义元素（简单按钮）已经显示并且输入绑定按预期工作，但输出绑定没有。

在 IE 11 中单击我的自定义元素按钮会导致错误：

该对象不支持此操作

到目前为止我做了什么：

1. 删除添加的自定义元素的 polyfill ng add @angular/elements（在 IE 中无法正常工作）

2. 将所有 Angular 包更新为7.2.1

3. 将以下 polyfillls 添加到polyfills.ts：

4. 手动引导模块

5. ng build --output-hashing=none并将所有生成的文件打包到btn-element.js其中http-server供本地测试使用（参见下面的index.html）。

我错过了特定的 polyfill 还是我做错了什么？还是现在还不可能？

app.module.ts：

button.component.ts：

索引.html

我也试过<app-btn label="Button Text" (myaction)="test($event)"></app-btn>没有成功。

编辑： 最小示例

在 IE 11 中似乎没有工作。要重现我的结果并查看 StackBitz 在 Chrome 中运行的结果，请按照以下步骤操作：

1. 复制到本地机器
2. 跑npm install
3. 运行npm run build && npm run package:win（对于 Windows）
4. 服务index.html和生成btn-element.js的http-server

因此，对于我的个人项目，我正在构建一个使用 @angular/elements 构建的 WebComponent 库，遵循这篇文章：
https ://medium.freecodecamp.org/how-to-create-angular-6-custom-elements-web-components- c88814dc6e0a

一切都在非角度上下文中顺利运行（基本 index.html，加载我编译的file.js渲染我的 web 组件）

但是，每当我加载相同的文件并在 Angular 应用程序中使用相同的 web 组件时，它们就会开始表现得很奇怪，请参见下面的示例。

来自 stackblitz 的最小库示例：https ://stackblitz.com/edit/angular-cdx2vf

在 Angular 应用程序中，我使用以下代码调用我的 webcomponents：<lm-button>Hello</lm-button>

效果图如下：

渲染的源代码：

当我在 Angular 应用程序上下文之外对其进行测试时，这是正确呈现的源代码：

所以我的问题是，我在我的库和/或我的 Angular 应用程序中做错了什么？

谢谢你们的帮助！

我创建了多个角度元素，如下所示：

1. 应用第一元素
2. 应用第二元素
3. 应用程序第三元素

当我使用这些多个元素并尝试在非角度应用程序（即简单的空白 html 项目）中渲染时，只有一个元素被引导，其余元素没有被引导。

这是我正在自定义的示例 poc https://github.com/BioPhoton/ng-elements-poc

我定制了什么？

1. 与 angular.json分开 vendorChunk ，这样我就可以将相同的 vendor.js 与多个元素一起使用

2. 使用常见的 polyfill 来减轻负担或避免不必要的 js 错误

问题：

1. 如何隔离将ngBootstrap元素单独渲染到其范围。

我试过的：

1. 尝试创建应用程序特定的平台工厂，理论上可以解决问题

const myPlatformFactory1 = createPlatformFactory(platformBrowserDynamic, 'app1'); myPlatformFactory1().bootstrapModule(AppModule).catch(err => console.log(err));

提前致谢。

Angular Elements是封装为自定义元素的 Angular 组件。每个 Angular Elements 都附带有角核心。如果在标准 html 页面中我包含 5 个 Angular Elements 组件，则此页面下载 5 倍 Angular 核心。

有一种方法可以包含一次角核心 e 仅下载组件代码？

我想为我的 Angular 元素获得准确的类型，但是我应该在哪里放置 HTMLElementTagNameMap-interface，以便正确识别？

在每次出现时强制转换类型有效：

但是使用Angular.io上提到的第二种方法，通过声明 aHTMLElementTagNameMap对我不起作用。

我必须如何或在哪里正确使用它？

在我的 Angular 7 解决方案中，我在 Microsoft Edge 的视图中遇到数据绑定问题/Opera、Chrome 和 Mozilla 等其他浏览器工作正常/。我的页面包含多个输入元素，例如文本框、下拉菜单、单选按钮、日期选择器。每个输入元素上都有 onValueChange 触发器，在控制器 /.ts 文件/中，这些更改是立即的，但视图没有更新。

我添加了双花括号表示法以在视图中显示当前值，但值是 null / 或旧值 / 直到您单击下一个输入 / 但不是每个输入 - 只有 datepicker 或 dropdown/。当我尝试在其他浏览器中检查这一点时，值会在输入值后立即显示。

我尝试为支持的浏览器添加基于 angular 官方网站的多个 polyfill，但没有任何帮助。

这是我的 tsconfig.json 和 polyfills.ts：

有什么方法可以让它在 Edge 上运行吗？

我正在研究一个递归查询构建器表单，它与这个类似，在角度 7 中，具有反应形式。意思是，用户可以通过点击继续添加并行规则，Add rule并且可以通过点击添加组Add group。我创建了两个组件，QueryDesignerComponent并且QueryComponent. QueryDesignerComponent保存外部容器，带有AND和OR条件并QueryComponent保存行输入，LHS即operator和RHS。

1. 当用户单击Add rule时，我只需通过使用QueryComponentinside再推一个条目来增加规则QueryDesignerComponent。我用 重复这个*ngFor。
2. 当用户单击时，Add group我正在调用QueryDesignerComponentinside QueryComponent，这使其递归。我用 重复这个*ngFor。

我已经完成了实现及其在具有角度环境的角度应用程序中的正常工作。

现在，我正在尝试将此流程移植到angular elements中，以使其可重用，而不管环境如何。

这就是我在QueryComponent里面放置第一行 [] 的方式QueryDesignerComponent，

这样我就可以管理内部的并行查询和组QueryComponent，

这就是我创建自定义角度元素的方式，

在第一次渲染中，它工作正常，我可以添加n并行行数。但是，当我单击Add group,QueryDesignerComponent的构造函数被调用两次！这使得第一个实例QueryDesignerComponent接收undefined和第二个实例接收正确的值。

我跟着为什么 ngOnInit 调用了两次？，相关的github 问题和 ngOnInit 和 Constructor 被调用了两次但是，我发现没有运气！！

有谁知道我怎样才能摆脱这个问题？任何帮助/指导将不胜感激！