问题标签 [angular-renderer2]

描述

我想从指令中创建和控制 Material ProgressBar。

问题

我无法更新 ProgressBar 的value属性（尽管其他所有内容，例如mode）。

Stackblitz：https ://stackblitz.com/edit/angular-mat-progress-bar-directive?file=src/app/progress.directive.ts

笔记

MatSpinner 显示相同的行为。

我正在学习 Angular，并且我遇到了 renderer2 的问题，似乎 get 工作正常，他使用正确的信息进入函数 styleChoice，但 setStyle 不适用于 ngInit。我试图等待该功能，但它也不起作用。

谢谢你们的帮助。

构造函数（）

ngOnInit()

风格选择（）

编辑

在阅读 Angular 的文档时，我发现一条信息表明 DOM 元素应该由 Renderer2 类更改。我尝试更新我使用 ViewChild 指令的项目，但这种方式不适用于 HTML Canvas 元素，普通的 HTML 元素就像一个魅力。Renderer2 不支持 HTML Canvas Element 修改吗？

我有一个指令，当您悬停元素时实现滑块，如果您在悬停图像时访问此站点，该指令使其他图像绝对为主图像并启用箭头以滑动到下一个图像，唯一的问题是我有一个 appLazyLoadWithLoading 指令，当图像在页面中可见且不在屏幕外时加载图像，并在加载之前添加加载，我正在寻找一种将指令添加到创建的 img 元素的方法。

通过这种方式添加了 img 元素，但我无法将我的指令添加到它尝试这种方式和 $compile 并且它们没有工作。

我需要在动态创建输入字段的页面上修改 DOM。

我使用 @viewChildren 将这些 elementRefs 拉入一个数组。我一直在阅读使用 elementRefs 是一个坏主意。我不使用它们来修改 DOM，但我确实使用它们来允许 renderer2 修改 DOM。

IE

score 是分配给@viewChildren 的变量。

这段代码有问题吗？

我想知道其他一些示例是否会导致可移植性或服务器端渲染问题.....

1)

（再次分数是我分配给@viewChildren的变量）

3)

currentField 只是一个 ElementRef。

4）。使用 Renderer2，所有这些方法都可以接受设置值的方法吗？

从安全角度来看，这两种访问本机元素的方法有什么区别吗？

出于性能原因，我在 Angular 的 ngZone 中手动添加和删除了 DOM 元素上的事件监听器。我的实现看起来不错，我目前正在尝试重构代码以使其保持干燥且更具可读性。现在，我的问题是是否有办法将多个 DOM 元素传递给Renderer2.listen()函数。所以基本上我想做这样的事情：

提前感谢您的任何想法或建议。

我有一个关于 DOM 操作和指令的相当复杂的 Angular 问题——如果我的措辞不好或令人困惑，请告诉我，我会修改我的问题。

请注意，我已经降低了示例中的复杂性，以减少代码并在我的实际问题中获得概念证明。

例如，我有一个将 CSS 样式应用于按钮的 Angular 指令。像这样的东西...

这是一个简化版本，我在其中添加了一个输入，而 logic/Input() 将确定按钮的外观。我会像这样在组件中实现按钮：

现在说我想要花哨并让我的按钮/指令在单击时显示一个子菜单，并且这个我动态创建的 DIV 菜单充满了我想要包含/具有相同按钮指令的更简单的按钮。因此，假设我添加了称为菜单的 Input()。这是一个字符串数组，用于确定子按钮样式。因此，如果我将以下内容添加到我的指令中

我想在dom中输出的是：

这样该指令就可以向 dom 添加新按钮并应用自己来设置菜单中按钮的 css。所以我修改了我的指令代码：

现在虽然这会附加到我创建的菜单中，但子/菜单按钮将是默认按钮，并且没有应用我的 Angular 指令。我是否可以执行动态内容，以便使用Renderer2or应用我的指令（甚至在其自身内） ComponentFactoryResolver。我知道在 AngularJS 中我可以使用$compile，但在 Angular2 中我找不到任何关于如何解决我的问题的示例——只有如何注入组件，而不是带有 Angular 指令的 HTML 元素。这是可以实现的，还是我在追逐无法完成的事情？

我尝试使用 Angular 指令，它在按钮操作时将角度材料输入插入到 DOM。但是我有问题，没有角材料样式，有人可以帮我吗？

目前我有一个 Angular 组件，它使用 Renderer2 库将脚本标签列表附加到 DOM 中，这些脚本的代码是从外部源检索的。在以下代码段中，scripts数组是源链接列表。在这种情况下，我无法从中修改 JS 代码：

我试图从 DOM 中删除它们，但脚本继续执行：

我想要的是让 pid 或某种标识符能够杀死 ngOnDestroy() 中的 JS 脚本，以及这样做的方法。