问题标签 [angular-elements]

我正在使用动态组件，我正在重新编写它以尝试更好地解释。

应用模块

我的应用程序模块包含一个entryComponents包含这两个东西的数组

• ContainerComponent
• TextComponent

现在我可以疯狂到心满意足为止

游戏模块

但是，现在我有一个问题。我的一些组件是游戏，它们很重，实际上它们可能永远不会被使用。因此，我必须有延迟加载的路线。GameModule有以下

• GameContainer
• GameComponent

所以现在我在这个地方：

而我真正的目标是：

我的问题是GameContainer。最初它是一个DynamicComponentService，但由于嵌套容器的循环依赖关系，我无法使用它。 请参阅我最近的问题，我将它从服务中移出并返回到Container.

问题是我似乎无法成功扩展Container. 我希望我能做到这一点：

但这不起作用，我的覆盖constructComponent似乎从未在我的GameContainer. 所以这个想法就消失了。

Angular Elements 会帮助我吗？

我目前最大的问题是弄清楚如何正确处理这两组entryComponents. 我已经没有选择或策略了。

然后我读了一篇文章AngularElements，我真正想知道的是这是否对我有帮助？当我使用时AngularElements，是否可以在应用程序级别注册我的所有组件，以便我的单机Container可以访问所有“工厂”，但仍然可以从延迟加载中受益？

Angular 在说“看，伙计，我不知道是什么app-game”，这让我做了各种各样的噩梦，因为即使我加载它，我现在在其他地方也有一些注射器，我似乎无法处理它.

我希望将 Angular Elements 与外部库（Kendo UI）一起使用。我设法创建了一个组件并将其添加到我的应用程序中。问题是 Kendo 的 CSS 搞砸了我所有的应用程序样式。

关于如何封装 CSS 以仅应用于组件而不“泄漏”到父应用程序的其余部分的任何想法？

谢谢

有关代码，请参见以下 stackblitz： https ://stackblitz.com/edit/angular-kpmnjg

如果我构建代码，我会得到 4 个 .js 文件和 styles.css 文件（包含 Kendo UI 的样式）。将文件添加到干净的 html 页面可以正常工作。但是，一旦我将它们添加到我的应用程序中，styles.css 就会渗入我的应用程序，弄乱样式（按钮/输入/等）。

我使用 angular-elements 构建了一个项目，并成功地将一个组件嵌入到另一个应用程序中。我现在想做的是能够从它包含的应用程序中调试原始组件。

组件的所有逻辑都在一个文件中，该文件是 Angular 在构建期间创建的 4 个文件的串联 - runtime.js、polyfills.js、scripts.js、main.js。

这 4 个文件的js.map文件也是在构建期间创建的，我可以成功地在原始main.ts文件中放置并命中断点（在包含元素输出文件的目录中的 jsmaps 之后）。但是，我一直无法找到一种方法来从使用它的应用程序中调试实际的component.ts文件。该组件的js.map也包含在包中，我可以通过 Chrome DevTools 查看 component.ts 文件，但如果我放置任何断点，它们将永远不会被命中。

app.module.ts

main.ts

据我所知，component.ts 文件逻辑在构建期间包含在 main.js 文件中，但似乎没有创建描述两者之间连接的映射。

作为参考，这是我阅读/观看的内容。
使用 Angular 6 构建自定义元素/Web 组件
Angular Elements – 使用 Angular 6 的 Web 组件实用介绍

我成功编写了一个运行良好的 Angular 6 应用程序。它正在从远程服务器加载一些内容，其中包含一些 HTML 代码。此代码显示在例如这样的 DIV 元素内：

另一个.component.html

现在我想包含自定义元素，以便服务器可以提供自定义 html 内容，例如

来自服务器的响应：

为了识别这个自定义元素，我做了：

• add @angular/elements在我的应用程序的控制台中。
• 添加"@webcomponents/custom-elements": "^1.0.8"到package.json
• MyCustomElementComponent在app.module.ts(todeclarations和entryComponents)中添加并声明了组件
• 像下面这样constructor写：AppModule

app.module.ts：

问题

在某种程度上，该应用程序运行良好。问题是浏览器不断重新加载应用程序。在开发工具中检查元素时，我可以看到<my-custom-element>重复渲染。选项卡中的浏览器微调器一直在转动。该应用程序响应相当缓慢，因为它正在循环执行某些操作。

我认为自定义元素一次又一次地加载应用程序本身。我应该改变什么来防止这种情况发生？

更新

由于我希望在内部呈现自定义元素innerHtml，因此来自服务器的响应通过DomSanitizer。似乎消毒剂正在连续发射并且有点阻塞应用程序。

任何帮助将不胜感激！

我正在尝试使用 Angular Elements 创建可重用组件，该组件将用于旧的遗留项目（这是没有任何前端库的 java 项目），我需要为它提供一个包，而不是单独包含 zone.js 的脚本、脚本.js 和 main.js。

但是在开发模式下，我遇到了一些源映射问题。Scripts.js 和 main.js 都有源图，我真的无法正确联系它们的源图。

我试过了：

• 与 cat 的简单连接 - 源映射无法正常工作。npm

• 源映射连接

浏览器看到生成的源映射但无法处理 - 我仍在调试原始 js。

例如，这件事不考虑源地图:( https://www.telerik.com/blogs/getting-started-with-angular-elements

任何想法如何正确地做到这一点？

我想用 angular6 和 angular-elements 创建几个自定义 Web 组件。现在，如果所有内容都直接在 app.module.ts 中定义，我就可以正常工作了。

但是我的项目由几个功能模块组成，里面有自己的自定义依赖项、组件等。

我尝试使用两个引导模块扩展 main.ts，但这不起作用。

我怎样才能做到这一点，或者我必须将我所有的功能模块放入几个“自己的”项目中？

我被一个我无法解决的问题困了几个小时。我创建了一个组件并将其捆绑为一个 js 文件。我想将此 js 文件加载到另一个项目中。到目前为止，一切都很好。但是我用 @Input() 装饰器创建了一个组件。现在，当我在另一个项目的 html 中添加我的自定义组件并直接传递 @Input() 属性时，仍然一切正常。但我希望这个属性不直接在 html 文件中传递，我想将它绑定到这个组件中。说得够多了，让我们一步一步来看看我到目前为止的情况

已安装的库和依赖项

npm i @angular/elements @webcomponents/custom-elements fs-extra concat --save

导入的脚本

创建的组件

打字稿文件

html文件

将组件注册到AppModule.ts

现在我可以在 index.html 中添加这个自定义组件，ng serve并且一切正常。

我有一个构建脚本，它将我的组件捆绑到一个 js 文件中。这对这段代码非常有效。这是我添加到另一个项目的内容。

工作示例

<widget-name subtitle="Subtitle of this cmp"></widget-name>

不工作的例子

<widget-name [subtitle]="subtitle"></widget-name>

在相应的打字稿文件中，我添加了一个简单的属性，希望它将与subtitle@Input() 属性绑定。

我也尝试过不同的绑定，但是当我在不同的项目中添加自定义组件时，绑定源似乎丢失了。

我们已经使用 Angular v6 构建了一个新的 web 组件。现在的问题是，当我在空白应用程序中使用该组件时，它可以完美运行，但是当我在现有应用程序中使用它时，它会完全破坏 css。

我能找到的原因是，当我使用引导程序构建我现有的应用程序并使用引导程序构建该 Web 组件时，它导致 _ngcontent-* 与这两个组件匹配，然后相互流血。像row.[_ngcontent-c1]一个这样的例子我们如何确保它不会互相流血。

我什至手动尝试将 Web 组件 js 文件样式从更改为[ngcontent-%COMP%]， [ngcontent-mine%COMP%]但没有任何效果，即使在源代码中也没有改变

我调试的来源是

https://github.com/angular/angular/pull/17745?#issuecomment-385561001和https://github.com/angular/angular/pull/17745#issuecomment-418658799 ...帮助自己。

还查看了Angular Elements - 外部库的 CSS

我正在构建一个角度元素并将一些输入参数传递给它。我可以很好地传递一些字符串输入参数（ikrId 和环境工作得很好），但努力通过一个角度元素将布尔值传递给 showTitle 输入属性（将 showTitle 属性从父角度组件传递给组件工作得很好）。

这是组件片段：

这是我在普通的旧 html中使用它的方式：

但是显示标题并没有传递到我的组件中，它总是正确的。

我在这里想念什么？

谢谢！

我有几个独立的 Web 组件，由 angular 元素组成，我将它们导入一个主组件，它有一个路由器并且是基本应用程序。路线非常简单：

组件做他们应该做的事情。

现在，当我启动主应用程序时，一切都按预期显示，回调工作正常，但变量未定义。我的 webcomponents 中的 @Input 声明中是否缺少某些内容？