问题标签 [angular-renderer2]

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.

0 投票
2 回答
2515 浏览

javascript - Angular 4使用渲染器在每个新行之前添加一个图像

我正在尝试在每个新行之前添加一个图像所以我能够实现这一点

但我想在每个新行之前添加图像

编码

所以 addClass 正在为整个工具提示添加样式。这很好,我正在进一步尝试的工作是在新行的开头添加图像

编辑

在尝试了很多之后,我能够添加图像“但是”它只会被添加到最后一个值而不是之前的值(而我想在每个新行上添加图像)。

最新的

现在我已经实现了在每一行新文本之前得到图像,感谢 Yuri 的回复 最后一个故障是如果文本很长,它肯定会结束,但缩进不是上面的行文本,它从图像下方开始

预期的

我已经尝试过分词, justify ,它没有帮助,也许我必须将此文本嵌入到 div 或 p 标签中,然后为它们提供样式。

0 投票
0 回答
3404 浏览

angular - Angular 6:Renderer 2 - 使用 Renderer2 渲染自定义组件不起作用

我有一个自定义角度组件<sample-cmp></sample-cmp>

当它通过 Renderer2 附加到 DOM 中时,它的内容不会在浏览器中呈现。

请找到我用来通过 Renderer2 渲染自定义 Angular 6 组件的以下代码

上面的代码将在 UI 中生成下面的标签。

但是这个“sample-cmp”模板包含“Hello World”文本并且没有被渲染。

我的问题是,当我们使用 Renderer 2 渲染一个自定义组件时,自定义组件模板中的内容没有被渲染。

0 投票
1 回答
167 浏览

angular - 组件中获取的 HTML 元素坐标错误

我在 gridster 项目中的 SVG 图表中添加了一个自定义工具提示(所有示例都在 stackblitz 上提供)。工具提示 (div) 坐标是使用(简单示例- 工具提示 div 偏移 20px)获取nativeElement和设置的。但是,当我在 gridster 项目中投影图表小部件时,工具提示总是添加到错误的位置(请参阅完整示例- 将鼠标悬停在圆圈上)。似乎对于每个小部件,div 的坐标都会增加该小部件距离窗口边缘(左侧和顶部)的距离。Renderer2

从视觉上看,这是工具提示应该离圆圈多远:

普通的

但实际上(元素离屏幕边缘越远,工具提示放置得越远):

不正常

我试图看看这是否是<ng-content>ie 中的内容投影的问题GridsterItem,但是当我制作一个自定义组件来模仿它时,我似乎并不喜欢这样(参见这个例子)。为什么 gridster 项目中的坐标很时髦?是renderer相对于小部件设置坐标,还是相对于document?

0 投票
1 回答
1339 浏览

angular - 工具提示作为动态组件

我想将工具提示添加到 svg 元素,但作为动态创建的组件。我将工具提示添加到元素中,使用TooltipDirectivesvg元素,即

TooltipDirective动态创建TooltipComponent(在方法中onMouseEnter),并使用渲染器并ElementRef设置它相对于宿主元素(svg 图表)的位置。或者至少它应该这样做。问题是它没有,尽管设置了 的位置TooltipComponent,组件总是被添加到错误的位置。工具提示应该在圆圈旁边,而不是如下所示:

工具提示会忽略使用渲染器设置的坐标

为什么动态工具提示组件忽略了使用渲染器设置的样式选项?这是完整的例子。想法是将tooltip添加为组件,以尽量避免svg的父元素overflow: hidden设置。

0 投票
1 回答
1936 浏览

javascript - Angular 6 - Renderer2 - [动态] DOM 未创建 - SELECT-Option

我正在尝试使用 Renderer2 动态创建选择选项。目前无法创建<Select></Select>元素。但我可以看到能够看到<options>被创建。由于某些问题,不允许分享所有片段。对此表示歉意。

问题是:因为它没有创建选择元素。它只是简单地显示数组的第一个元素。当我控制台它时,我可以获得所有元素ngOniti()

也没有其他控制台错误。

粉煤灰。

在此处输入图像描述

请有人帮助我并指出正确的方向。如果可能,请分享工作演示。花了这么多小时后,我发现只有这个。

注意:如果我的解决方案不好,请分享任何其他更好的解决方案。

谢谢大家!谢谢。

0 投票
1 回答
2032 浏览

angular - 在 Angular 7 中使用 getElementById 对 DOM 元素应用指令

我有一些由第三方(情节)生成的 HTML,我很想在它创建的一个 DOM 元素上应用我们已经拥有的指令。

该指令在单击时打开一个 colorPicker 并将颜色设置为字符串。

我可以使用querySelector或来访问元素getElementById,但是如何转换/包装它以便添加指令

我试过:

或者:

comp没有出现帮助

0 投票
1 回答
269 浏览

angular - 存储使用 renderer2 创建的 nativeElement 的引用

我正在尝试实现拖放指令。

拖放工作。

我现在正在尝试处理单击,以具有与input type="file".

我的计划是<input>使用 Renderer2 添加一个不可见的,并在我收到对主机的点击时转发点击点击。

我可以创建元素,但我不能转发点击它。

如何访问 nativeElement 以转发单击它并对 fileChange 事件做出反应?

这是我尝试过的:

请注意,我隐藏了输入,因为该指令不能与主机布局交互,但是当我显示它时,它可以正常工作(单击它可以工作)。

0 投票
1 回答
648 浏览

angular - Angular selectRootElement 适用于应用程序而不是测试

我的 Angular 应用程序要求通过以下方式将数据传递给页面上的根组件:

经过大量研究,我决定不使用 ElementRef 来访问该属性,而是使用 Renderer2。我的 AppComponent 的构造函数设置如下:

当我在我的应用程序中运行它时,我没有收到任何错误,并且我得到了值“hello world”。但是,当我尝试运行单元测试用例时,出现以下错误:“选择器“application-root”与任何元素都不匹配”。这是我的测试用例:

现在,如果我将 selectRootElement 调用移出构造函数,并移入 ngOnInit() 函数,我的单元测试用例通过,但是当我尝试运行应用程序时,我得到一个空白屏幕。

我需要在我的代码中做什么才能访问可以在我的应用程序中正确运行并通过单元测试用例的根组件属性?

0 投票
0 回答
334 浏览

angular - 我是否从 Renderer2 的 .listen 函数中正确取消订阅?

我正在向 render2 生成的元素添加多个侦听器。

我正在做这样的事情,

这是处理所有处理程序的好方法吗?

0 投票
1 回答
3042 浏览

javascript - 如何使用 Angular Renderer2 在最后一个子元素之后追加?

我正在尝试在带有 Angular7 指令的输入字段之后附加一个按钮。问题是 Renderer2 方法 appendChild 将按钮放在输入字段之前。

输入字段图像前的按钮

在模板中:

我希望按钮位于 DOM 中的输入字段之后。