问题标签 [angular-renderer2]

我有一个（微调器）指令，可以.spinner使用@HostBinding. 它还会在激活时添加/删除img(spinner.gif)。

如果主机上存在，则应用文件中.spinner定义的一堆样式：scss

我想在我的指令中将这些样式应用到主机上。仅当某个类使用Renderer2and存在时，是否可以在主机上应用样式ElementRef？

这显然不起作用：

我从 http 请求到外部系统中获取了一段 html 代码，我应该在我的角度应用程序的视图中显示它

准确地说，这是我必须展示的 html 片段（每个请求和响应都会有所不同）

我使用了不同的解决方案建议，例如 innerHtml ，但没有一个对我有用（可能是因为我的 html 代码中有一些脚本标签）

我将 html 片段作为字符串添加到组件中，并希望将其附加到视图（例如视图中的 div）

我有一个自定义复选框指令，它添加了传统标签/跨度样式的样式以及其他一些功能。它在自身周围注入包装器并在旁边注入跨度。我刚刚意识到，当放置在结构指令中时，它无法操纵 DOM。大多数设置是在构造函数中完成的，但我认为这可能需要更多的 Angular 生命周期感知才能与结构父级一起使用。

示例问题 DOM：

使用该评论的 div 它可以工作。但是，由于 ng-container 是直接父级，因此渲染器无法注入 DOM。这是构造函数：

编辑：添加了结果 DOM

没有实际错误。在有缺陷的情况下（ 的直接父级ng-container）我最终得到了初始元素，但没有注入： <input type="checkbox" alloy alloyLabel="default">

使用包装器div，我得到了预期的注入（_ngcontent* 已删除）：

我想获取以 id 'div' 开头的所有 div。为此，我使用 @ViewChildren 但我无法访问 div，因为我有一个空数组，为什么？

我的模板

零件

当加载名为“UPIComponent”的子组件时，我想将类“modal-lg”应用到具有模态对话框类的 div。我怎样才能达到同样的效果？

我在指令中有 3 个事件监听器，我在按钮切换和删除时添加和删除

监听器删除后，Angular 不再监听它们，但是比较第一次单击和第二次单击后获取的内存转储，我发现第二个有 9 个监听器（我在页面上有 3 个指令，所以 3 el x 3 个监听器）。

有什么想法是内存泄漏还是如何删除它们？

我正在使用第 3 方库将小部件呈现到屏幕上（Okta 的 SignInWidget）。小部件的呈现方式是这样的：

我最初的想法是将其放入指令中，但即使使用指令，您也应该让 Renderer2 进行渲染。这里有最佳实践吗？

我正在构建一个角度（反应形式）6/7 UI 向导应用程序。此应用将用于电子商务平台（例如 Shopify、WordPress），以替换平台的默认产品页面。该应用程序使用角度材料无线电输入来记录选择并为 DOM 设置值。

我的应用程序的早期版本使用带有 html5 的 javascript。选择图形输入时，代码将使用JavaScript设置值。

我确信我可以使用相同的逻辑使用相同的逻辑在 DOM 上设置值，但是 angular 不支持直接写入 DOM，并且更喜欢使用 Renderer2 进行 DOM 交互。

我已经花时间搜索并且没有明确的渲染器示例支持我想要如何使用它。渲染器的大多数示例都是用于指令使用。

使用反应形式或图形元素设置无线电、从 Angular 选择 DOM 的输入值的最佳方法是什么？

角度反应形式、输入元素是否会自动在 DOM 上设置值？

谢谢。

I am trying to use angular Renderer2 to add and remove a class in HTML template. Here I am facing the difficulties:

1. to add the class once component will load
2. Only the selected item should have the class

I have created a demo in stackblitz. Please click here to see code.

Thank you.

我正在尝试以角度向本机元素添加多种样式，目前正在使用renderer2API。

我有一个要求，其中样式将动态更改，并且可以有多种样式。这就是为什么我不使用类（addClass/removeClass）。

构造函数（私有 elRef：ElementRef，私有渲染器：Renderer2）

this.renderer.setStyle(this.elRef.nativeElement, "text-align", "center"); …………

需要一种动态添加样式的方法。就像是： this.renderer.setStyle(this.elRef.nativeElement, {style1: value1, style2: value2});