问题标签 [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.

272 问题
Newest
Active
Bountied
318
Unanswered
0 投票
1 回答
3188 浏览

angular - Angular Elements/路由器出口

Angular Element 可以使用路由器插座吗？

并且，如果是这样，该路由器插座会干扰（与）父路由器插座吗？

0 投票
1 回答
334 浏览

angular - 非根模块中的 Angular 6 元素

我研究了使用 angular 6 元素的不同示例，发现它令人印象深刻。当您将自定义组件连接到 AppModule（根模块）时，所有这些都描述了方法。我想将我的自定义组件保存在一个单独的模块（功能模块）中。每次我试图实现这一目标时，我都会收到下一个错误 -

Uncaught TypeError: Failed to construct 'HTMLElement': Please use the 'new' operator, this DOM object constructor cannot be called as a function.

有谁知道如何在单独的模块中实现它？
谢谢！

0 投票
1 回答
1923 浏览

angular - Angular Web 组件无法正常工作

由于我想创建一个 Web 组件，我创建了一个简单的 Angular 6 项目。（GitHub 网址）。您可以使用git clone https://github.com/CSantosM/angular-elements-demo.git.

我已按照本教程进行操作，并且成功创建了 Web 组件。但是，当我在另一个应用程序中使用 JavaScript 测试这个 Web 组件时，它并不能完全工作。

问题是*ngIf="display"html button.component.tsgithub代码：

在我位于此处的 JavaScript 应用程序中插入 Web 组件并动态更改输入 Web 组件，该按钮无法正常工作。

我的 index.html 是（github代码）：

当我按下这个应用程序的按钮时，该sendName()函数被调用并 userName input发生变化，名为angular 的变量display更改为true，并且可以看到 Web 组件。（github代码）

如果我不包含该display变量，则 Web 组件将按应有的方式工作。

在这里你可以看到行为：

在此处输入图像描述

Angular 是否存在已知错误？为什么使用简单的 *ngIf，Web 组件不能正常工作？如何解决这个问题？

提前致谢。

0 投票
1 回答
8620 浏览

javascript - 影子dom内的脚本不起作用

我已经创建并导出了一个 Angular Element（Angular 中的 Web 组件）作为单个脚本标签（user-poll.js）。要使用这个 Angular Element，我只需要在主机站点中指定以下两行：

工作 JSBin 示例

我有以下要求：

  1. 在外部站点上加载多个 Angular 元素。
  2. 动态加载所有 Angular 元素

我有以下问题：

  1. 在站点上加载多个组件会产生 Angular 冲突，因为每个组件脚本本身就是一个完整的 Angular 应用程序。
  2. 为了解决冲突问题，我将每个组件加载到一个单独的Shadow Dom组件中（即在 shadow dom 容器中添加组件标记和组件脚本文件链接），以便每个组件都被沙箱化。但是 shadow dom 中的组件脚本不起作用。

shadow dom 内部动态加载组件的JSBin 示例

那么，在网站上动态加载多个 Angular 元素的最佳方式是什么？

0 投票
1 回答
144 浏览

css - 防止父页面中的 Web 组件覆盖 CSS

我使用 Angular Elements (6.0.3) 创建了一个 Web 组件。当我在另一个网站中使用 Web 组件时，该 Web 组件会覆盖父页面的样式，因为它也使用 Bootstrap。我知道有视图封装原则，但据我所知“Native”封装还没有完全支持。所以现在我使用默认的“仿真”。

我发现如果我:host ::ng-deep在我的样式前面添加，它们只会应用于 Web 组件本身，这很棒。但是，我在 angular.json 中加载的所有 css 和 scss 文件似乎也覆盖了父页面。有什么办法可以防止导入的样式文件出现这种行为？

我在 angular.json 中的样式导入：

0 投票
2 回答
2869 浏览

angular - Angular Elements：对材质的依赖

我正在创建一个Angular Element以用于其他项目。该元素是一个在其模板中包含 Angular Material 组件的组件，所以最终我的元素要求页面 <link> 一个 Material 主题 CSS 文件（以及 Material 图标和 Material 字体文件，并且该link标签只能出现在文档中<head>）。

很高兴地说，所需要的只是在页面上调用platformBrowser().bootstrapModuleFactory(...)和写入<some-custom-element>，而无需进一步说明。那可能吗？

要求我的自定义元素的用户在<head>他们的页面中链接所有这些 CSS 文件是否可以接受？我想使用这种模式，以后添加新的依赖项不会是向后兼容的更改，我必须告诉每个人添加新的 CSS 文件或制作新的自定义元素。

0 投票
3 回答
2797 浏览

angular - 集成的 Web 组件在 Angular 6 中使用了错误的 base-href

我刚刚使用 Angular 6 创建了我的第一个 Web 组件。一切正常，直到我尝试将 Web 组件集成到现有应用程序中：

集成 Web 组件的应用程序 ( https://www.example.com )：

我的 web 组件 index.html 不包含 base-href。

浏览器现在尝试加载 Web 组件的资产：

反而

当我尝试在构建期间添加 base-href 时，会导致：

非常感谢任何帮助，我的想法已经不多了。

0 投票
1 回答
2169 浏览

angular - 我可以拥有在单个 js 文件中发出 Angular 元素的 Angular 库吗？

我开始接触 Angular 6 位，并且对 Angular Elements 以及新的库项目非常感兴趣。我有一个即将进行的项目，可能需要这两个新功能。

我需要创建可跨 Web 框架重用的自定义 UI 组件，但我也希望在 Angular 项目中使用它们时获得一流的支持。我已经按照这个教程学习了一个 angular6 应用程序，它注册了自定义元素，并将 webpack 包连接到一个文件中。然后我可以在纯 html 页面中使用该单个 js 文件，并且一切正常。

关键是在库项目中创建这些自定义元素会很棒。这样我就可以在我们的内部 npm 注册表上分发我的库，以及构建包含所有自定义元素的 js 并将其部署在 CDN 上。

是否可以在新的库项目中构建 Angular Elements？

0 投票
3 回答
501 浏览

angular - Google Chrome（Web 组件）中未解析 Angular 6 变量

使用 Angular 6，我创建了一个从另一个应用程序集成的 Web 组件。在没有集成的情况下运行时，一切都适用于所有浏览器。当 Web 组件集成到其他应用程序中时，它可以在 IE、Safari、FF 上运行，但不能在 Chrome 上运行。

我设法确定了问题所在。第一次调用从我的后端获取一些配置数据。它应该被写入 var this.conf，但是在集成时不会在 Chrome 中发生。

我的组件：

合作伙伴服务：

我的观点：

控制台输出：

var 在视图中没有得到解决。这可能是什么？

0 投票
1 回答
1228 浏览

angular - 如何使用 Angular 通用创建 Angular 自定义元素：SSR

我正在尝试使用Angular Universal: SSR和Custom Elements创建一个 Angular 应用程序。

我下载了Angular Universal: SSR中可用的示例代码，并在AppModule的构造函数中为自定义元素添加了以下代码行

它构建得很好，但是当我尝试为它服务时，我收到以下错误

是因为Element是仅限浏览器的本机对象，并且由于它位于服务器端，因此无法引用仅限浏览器的本机对象？有解决办法吗？


12345678910