问题标签 [angular-renderer2]

我想使用一个带有拇指标签的垫子滑块，它在移动时不会与滑块一起移动。我看到它的方式整个'mat-slider-thumb-container'沿着滑块移动'transform：translateX（xx％）'样式所以我猜我是否添加了相同的样式但带有-xx％到'mat-slider-thumb-label' 它应该始终位于滑块的中心吗？

<div class="mat-slider-thumb-container" style="transform: translateX(-100%);" ng-reflect-ng-style="[object Object]"><div class="mat-slider-focus-ring"></div><div class="mat-slider-thumb"></div><div class="mat-slider-thumb-label"><span class="mat-slider-thumb-label-text">0</span></div></div>

现在，首先，角度如何获得 xx% 以及如何获得这个值？一种解决方法是只计算带有实际值的百分比和滑块的最小值/最大值，但 angular 必须将此百分比存储在某个变量中，所以在我看来，使用同一个变量会更加优雅角度必须使用。

我尝试使用指令将 'transform:translateX(xx%)' 的样式添加到具有 'mat-slider-thumb-label' 类的元素中，但它似乎忽略了它。当我添加其他样式时，它工作得很好，例如：背景颜色或宽度，但变换似乎完全被忽略了，我真的不明白为什么。

我还尝试了其他转换值，例如 px 而不是 % 或旋转元素，但似乎没有任何效果。

我的html：

这是我在这里实际发布的第一个问题，我希望我足够清楚地表达了我的问题，欢迎所有找到解决方案的建议

我无法为小型自定义上下文菜单获取正确的值。通过设置样式时ngStyle。当像下面那样做时，组件将被正确渲染，但console.log会为元素的实际位置显示错误的值（-9999px）。

我不想用 setTimeout 之类的东西来破解它。有没有更好的方法来做到这一点，还是可以听风格改变！？

组件.html

组件.ts

我正在使用 Chime JS SDK 创建角度客户端。我能够创建会议并将与会者添加到会议中。但是，没有关于如何将视频图块绑定到 Angular 上的 UI 的明确文档。我正在尝试这个videoTileDidUpdate事件：

事件被无限触发并创建无限视频元素。然而没有视频。如何获取视频标签上显示的视频。

我想使用 Renderer2 将属性“必需”动态放在输入文本字段上。

添加了属性，但字段为空时字段不会变为无效。

我尝试了上面列出的不同方法，但没有任何效果：

我该怎么做？

不要告诉我使用 [required]="condition"，我知道，我想知道 Renderer2 或 ElementRef 上的其他东西是否有办法做到这一点。

谢谢。

这是我的.html。我希望当我在其中一个下拉列表中选择“其他”选项时，相应的“其他字段”被启用并成为强制性的，因此如果它为空则设置为无效。

在我的 .ts 中，我正确启用了“其他字段”，但我无法将其设置为强制性。我以为我可以用 Renderer2 来做到这一点，但它不起作用，因为即使设置了“必需”属性，即使该字段为空，该字段的状态仍保持“有效”。

我正在尝试创建一个基于聊天的应用程序，在其中我根据要求创建每种类型的聊天弹出窗口并使用Angular Renderer2. 我尝试(click)在 UI 中渲染时向聊天消息元素添加一个属性。

我收到了这个错误：

DOMException：无法在“元素”上执行“setAttribute”：“（（单击））”不是有效的属性名称。

聊天组件.ts

我有一个使用 Element Ref 和 Renderer 2 来设置元素样式的指令。我想知道如何在此指令中使用渲染器或任何其他方式设置占位符的样式。

代码

TextSizeDirective.ts

应用组件.html

如何SVG在 Angular 中使用 Renderer2 渲染（我本地存储在我的项目中）？

我尝试这样做：

但它实际上将渲染器作为文本。

有人可以帮忙吗？

我正在尝试像这样使用 ViewChild：

这是模板：

但是， ViewChild 注释显示此错误：

制作目标 ES5 不是我的解决方案，因为我不希望这样。

有什么方法可以使用 ViewChild？我指的是本教程：https ://www.tektutorialshub.com/angular/renderer2-angular/

我正在实现 Angular Material Date Rage Picker，并希望将一个组件或元素插入到日历弹出窗口中。目前，我可以通过直接 DOM 操作来做到这一点。我想知道如何使用 Renderer2 或其他不直接操作 DOM 的工具来完成此操作。

在代码中，我等待从mat-date-range-picker元素“打开”的事件。当它执行时，我运行这个函数：

这是我要完成的工作的图片：

在这里你可以找到我放在一起的代码=

https://stackblitz.com/edit/angular-hdrguh-frwr45?file=src/app/date-range-picker-selection-strategy-example.html

如果取消注释// this._moveShortcutsListWithDocument();，您会发现此控制台错误：

我想动态创建一个元素，然后获取它的 clientWidth。使用常规 DOM API 的代码片段如下所示。

HTML 片段：

该元素的 css 属性可见性设置为“隐藏”。
打字稿/ Javascript 片段

如何使用 Angular 的 Element Ref 和 Renderer2 API 实现目标？