问题标签 [angular-elements]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
angular - Angular Elements 脚本导入与元素参考位置
我们正在为工作中的项目构建 Angular元素并且遇到了一些奇怪的东西，但也许它不是那么奇怪......
页面上包含脚本导入的 Angular Elements必须在元素引用之后（我想这是有道理的，但是当顺序颠倒 IE 时，DOM 中的元素引用在脚本导入之前，没有任何反应。没有错误消息，没有元素没有任何约束力。）
这是预期的行为吗？元素引用是否应该总是在脚本导入之前出现？
angular - Angular.During ng build --prod get error : Uncaught (in promise): Cannot read property 'call' of undefined
在我的角度应用程序中使用外部角度元素（webcomponents）时出现以下错误。
未捕获（承诺）：TypeError：无法读取未定义的属性“调用” TypeError：无法读取未定义的属性“调用”
它仅在以生产模式构建（ng build --prod）、优化设置为 true 且延迟加载时发生。
package.json 依赖：
以下是复制步骤。
应用程序源（GIT 存储库）：
https://github.com/gowthamr123/repro-app
运行 npm install do ng serve 并转到以下 url 后：
http://localhost:4200/selfcare/tariff-change
它会正常工作。
现在在生产模式下运行 ng serve --prod
发生错误：
未捕获（承诺）：TypeError：无法读取未定义的属性“调用” TypeError：无法读取未定义的属性“调用”
任何帮助将非常感激。
angular - 如何使用 MatTabChangeEvent 获取内容
我通过指令和事件读取选项卡菜单。我得到了正确的索引，很可能是正确的元素。现在我想为 ElementRef 设置动画以便能够对其进行动画处理，但我找不到它。它不是 templateRef 也不是 origin。有人可以告诉我如何找到当前元素以及在更改选项卡时如何修复它吗？
下面的代码是一个简单的颜色更改示例，看看我是否有正确的元素；我的最终目标是能够通过将内容 1 淡出和将内容 2 淡入动画来为内容制作动画。
angular - Angular Elements 应该被用作跨多个 Angular 应用程序的可重用组件吗？
我们需要在不同的 repos 中跨应用程序重用组件。我们的一种解决方案是将这些组件作为 npm 包提供。我们正在考虑切换到 Angular Elements，并想知道这是否是正确的方法。
Angular Elements 会共享通用的供应商文件，还是会是我页面上 n 个元素的 n 倍有效负载？
多个 Angular 元素会无缝工作，并且不会与父 Angular 应用程序或彼此冲突吗？我们听说过一些 Zone js 冲突吗？
如果有共享的缓存数据（例如，在 ngrx/redux 存储中），元素是否可以访问它？
除了创建单独的库并将常规组件导出为 npm 包之外，使用这种方法有什么好处吗？
angular - 在 Angular 项目中使用多个 Angular 元素作为 Web 组件
给定三个使用 v6.1.9 的 @angular 项目：host、alpha和beta
alpha并beta使用 @angular/elements 创建和定义一个 Web 组件，如下所示：
alpha并beta使用构建ng build --prod --output-hashing none，然后运行构建后脚本以按以下顺序连接生成的文件：scripts.js, styles.js, runtime.js, main.js.
polyfills.js 被跳过，因为它main.ts会在加载库时检查使用的 polyfills 是否已经定义（例如，避免尝试重新定义 zone.js）。
结果束是alpha-component.bundle.js和beta-component.bundle.js。
host使用标签引用上述捆绑包<head>。index.html<script defer>
alpha如果捆绑包是按then的顺序引用的beta，我会看到alpha尝试引导两次；以相反的顺序，我会看到beta尝试引导两次。
由于第一个引用的捆绑包尝试引导两次，它尝试为捆绑包定义 Web 组件两次，从而导致错误，并且永远不会注册第二个引用的捆绑包的 Web 组件。
目标是能够使用 @angular 创建许多 Web 组件，然后在其他 @angular 或insert framework here技术中使用它们。
angular - Angular Elements 在一行上生成 HTML
这非常烦人。你们中的许多人可能都知道，浏览器有一个“错误”，它对待内联块元素有点奇怪。如果您将两个 inline-block 元素并排放置，它们将有一个不可见的边距，如您在此处看到的：http: //jsfiddle.net/8o50engu/
但是，如果它们在同一行，奇怪的空间就会消失：http: //jsfiddle.net/8o50engu/1/
如果我制作一个 Angular Elements 应用程序（请参阅app.module.ts下面的 StackBlitz 链接中的文件），我的组件中的 HTML 都在一行上。这意味着我编写的 HTML 与输出不同。你可以在这里看到一个例子：https ://stackblitz.com/edit/angular-fowosb?file=src%2Fapp%2Fapp.component.html
如您所见，我的元素显然位于不同的行：
但是，输出在一行上：
这在常规的 Angular 应用程序（不是 Angular Elements）中运行良好，所以很明显这是 Angular Elements 的问题。
有没有办法在 Angular Elements 中禁用它？它解决了我在开始时解释的问题，但这不是我想要的。我希望我的 HTML 在我编写时输出。
angular - 从数据源到查看@angular/elements 的目标数据绑定的一种方式
我有一个使用@angular/cli v7.0.3 生成的项目。
我在这里推送了一个小型演示应用程序：https ://github.com/collinstevens/web-component-sender
我添加了@angular/elements 和@webcomponents/webcomponentsjs 填充。
我有一个基本的 Angular 组件 AppComponent 和一个使用在 AppModule 构造函数中定义的 @angular/element 构建的 Web 组件，使用 ReceiverComponent 作为 Angular 组件，web-receiver 作为 Web 组件标签。
我希望当我输入 AppComponent 时，它将使用更新的值更新 AppComponent 和 ReceiverComponent。
目前，只有 AppComponent 正在接收更新的值，而 ReceiverComponent 将只显示 AppComponent 中设置的初始值。
给定https://angular.io/guide/elements#mapping，ReceiverComponent 上的 myValue Input() 应映射为 my-value。
应用组件
接收器组件
应用模块
angular - 在 Angular6 应用程序中使用时出现 Angular Elements 错误
我正面临使用 Angular Elements 构建小部件的奇怪行为。我创建了一个小部件来在另一个站点上弹出一个简单的反馈表单，也使用 Angular 构建，并且在开发中工作得很好，但是当我构建应用程序以进行生产时，小部件和一些延迟加载的模块之间存在不兼容。
首次加载应用程序时，小部件会从外部 URL 加载到应用程序中。然后我登录到应用程序，当一个模块被延迟加载时，它会报告以下错误
一些上下文信息：
- 小部件是使用 "@angular/elements": "^7.0.1" 构建的
- 该小部件正在使用 pollyfill，因为 Web 组件尚未被广泛采用。
- pollyfills 使用 Zone.js
- 该应用程序是使用 Angular 7.0.1 构建的
深入研究这个模糊的错误消息，我发现这与应用程序和小部件两次加载的 Zone.js 有关，这是与此相关的问题 - https://github.com/angular/angular/issues/24466 - https ://github.com/angular/angular/issues/24181 - https://github.com/angular/angular/issues/26158
我也尝试过这个解决方案，但没有成功： - https://www.npmjs.com/package/elements-zone-strategy
我是 Angular Elements 的新手，任何帮助都将不胜感激。
angular - 动态 Angular 元素之间的消息总线
我最近发现了 Angular Elements，并认为这可能非常适合我的门户应用程序，该应用程序涉及许多具有不同要求的团队。
团队将负责向其他团队提供他们自己的小部件。我需要在小部件（瓦片）之间建立一个完全解耦的类型安全消息总线，允许它们相互通信。
我从 GitHub 上的一个非常好的演示应用程序开始，并添加了几个类。分叉项目
外部世界的通信是通过继承 DashboardTileComponent 和 LazyDashboardTileComponent 使用的 BaseWidgetComponent 类的 @Input messageIn 和 @Output messageOut 来实现的。
DashboardComponent（容器组件）将负责实例化运行时小部件并使用 WidgetMessagingService 注册它们以启用交叉通信。注册是在 messageOut 上添加事件侦听器以发布新消息并在新消息到来时更新 messageIn。
这种技术的问题在于，没有办法知道小部件是否已被销毁以清除所有引用以避免泄漏。
我试图添加一个 @Output('destroyed') 并在 OnDestroy 生命周期钩子上发出事件但没有成功。
我找到了一些高级代码示例来拦截包括“disconnectedCallback”在内的所有事件并做我除了但我希望让其他开发人员的代码非常简单。角元素桥
在这里您可以找到我的工作实施。您只需要添加一个默认和一个惰性小部件，然后单击它们的发布按钮即可查看完整流程。
基本上我需要找到一种方法来知道小部件何时被释放并调用 unregister 方法来清除所有内容。
我怎样才能做到这一点？
有没有更好的方法来实现这种沟通？
angular - 将 HTML 字符串转换为 Angular 组件
假设我们进行 API 调用并在 String 中获取一些 HTML DOM。内容以不带角度的 HTML 形式出现，因此我必须首先将其转换为我想要的 Angular，然后将其编译为 Angular。
示例 API 响应：
我正在对其进行转换以获取所有 Anchors<a href="x"></a>并将它们转换为具有输入和输出的角度组件，这些组件将被注入父容器并一起解析，例如：
angular-anchor包含一个 click 方法，该方法从这些组件外部但在 angular 内部（来自服务）执行代码。
通过[innerHTML]在父容器中使用，其中转换是由管道完成的，就像：
内部的 Angular 组件不会被加载，整个工作只是由管道转换中包含的 safeHTML 解析的原始 Angular。
为了解决这个问题，我使用了 ng-dynamic 库，但它已经过时并且与 AOT 编译不兼容。尽管如此，我还是设法将它与 JIT 编译一起使用，但这对生产不利，效率也低得多。
这种方法的示例，“parentDIV”是一个标准的 HTML 标记：
context包含新组件内部所需的所有依赖项，例如我在“angular-anchor”中使用的第三个服务
从这一点开始，我阅读了几篇关于Angular Elements或Dynamic Components Injector的文档，但我无法在我的应用程序中使用它。
使用我刚才提到的这些方法或任何其他方法来使用 AOT 提供的自定义角度组件有什么好的方法吗？
提前致谢。如果需要，请向我询问更多详细信息。