问题标签 [angular-renderer2]

Renderer 和 和有什么不一样ElementRef？在 Angular 中，两者都用于 DOM 操作。我目前正在ElementRef单独使用来编写 Angular 2 指令。如果我得到更多关于 的信息Renderer，我可以在我未来的指令中使用它。

我正在使用 Angular 5.2.9。

我想知道什么时候应该在 ngStyle 上使用 Renderer2 ？哪个是最好的解决方案？

1：<div #div>FOO BAR</div>

2：<div [ngStyle]="styleValue">FOO BAR</div>

我知道在 ngFor 中使用“ngStyle”更容易，例如：

否则你应该为这种情况做：<div ngFor="let elem of array" #div>FOO BAR</div>

在 ngFor 中使用 Renderer2 的时间似乎更长，而且我什至没有终止订阅。

性能有区别吗？也许在别的地方？

我正在尝试创建一个具有多个角度超链接的导航栏。我想在任何超链接的单击/悬停时添加“活动”类，并从其兄弟姐妹中删除“活动”类。我正在尝试通过创建自定义指令来做到这一点。

这就是我所取得的成就。

我能够将活动类添加到元素中，但不能从兄弟姐妹中删除已经存在的活动类。

提前致谢。

我正在尝试通过renderer2在指令中动态地将按钮添加到textarea。但按钮不可见。以下是我的指令代码-

当我控制台记录 nativeElement 时，该按钮是可见的。console.log 的快照

我正在尝试将 Vanilla JavaScript 代码转换为 Angular 2+。

在 Javascript 中，我有这样的声明：

在 Angular 中，我发现复制上述语句的唯一方法是这样的：

问题：如果我在不同时间动态设置了多个自定义属性（--cssVariable1、--cssVariable2...）。Angular Renderer 将覆盖 style 属性，而不是附加到 style 属性。

渲染器可以用来实现这个功能吗？如果没有，是否有在 Angular 中使用 CSS 自定义属性的首选方式？谢谢！

假设我有以下 Angular 模板：

这部分代码是使用*ngFor.

我想<b>通过计算 first 和 second 的宽度来动态更改标签的左对齐<span>。

我已经尝试过使用[style.left.px]="FirstSpan.offsetWidth + SecondSpan.offsetWidth + 3"，但这会引发Expression Changed after Checked错误。

然后我想尝试使用QueryList<ElementRef>，但我面临的问题是图标仅在某些情况下出现，因此，我无法<b>通过使用as的children属性来添加样式，抛出错误说明无法找到财产。ElementRefRenderer2style

请帮我解决这个问题。

在我的指令中，我添加了一个这样的事件监听器：

然后我将以下行添加到指令中：

添加上述内容后，这是开始工作：

同样，我没有在以下位置获得任何控制台：

这是我的指令代码：

我如何理解上述行为？或者我的代码有什么问题？

我制作了一个在 Firefox 中运行良好的Snap-to-Component 指令，不幸的是，它与 DOM 紧密耦合，而这实际上不是“de Angular wey”。我该如何解耦？我已经研究了 Renderer2，它将被 Ivy 逐步淘汰，但似乎无法让它工作......

我的指令放在父节点上并与子节点交互。它应该可以工作，以便在主机父视图框容器内的 (mouseup) 上，它获取所有子组件空间/位置的中心，计算它们的 x 中线，并滚动到 x 中线最接近的组件父/视图框中线。任何见解都值得赞赏，特别是如果它们与 Angular 中的 DOM 解耦有关！感谢你们。

windowsnap.directive.ts：

谢谢！

有一篇关于Set Attribute Without value的帖子，它提供了一个很好的解决方案$('body').attr('data-body','');

但是，在我当前的 ionic 项目中，我使用 Angular 的 Renderer2 API 来操作 DOM，并且我需要动态创建一个按钮并将其设置ion-button为属性之一。

我可以使用以下代码设置具有价值的属性，但在弄清楚如何添加没有值的属性时没有任何运气。

任何指导表示赞赏。

在我正在构建的 Angular 5 应用程序中，我有一个侧边菜单和主内容菜单。

左侧的两个菜单项加载具有不同路线数据的相同组件。

默认情况下，Angular 使用相同的组件实例来渲染两者。因此，ngOnInit()只会被调用一次（一个实例）。

要呈现的组件包含一个子组件（更改检测设置为OnPush）。子组件以@Input()的形式接收数据

单击第一个菜单项时，数据将正确呈现。单击第二个菜单项时，旧数据仍在显示，一旦新数据从服务器到达，它就会被渲染。

提到的行为是正常的。父组件中的数据还没有变化，因此子组件@Input ( )没有改变，因此子组件的ngOnChange( )没有被触发。

当数据从服务器到达时，父组件将更新其数据，因此子组件@Input()将相应更新，因此将在子组件上触发ngOnChange()。因此，Angular 将更新 go 以进行 UI 渲染。

这里的目标是在导航到同一个组件时，预先重置数据，甚至在等待新数据到达之前。

这怎么可能？

谢谢