我正在使用第三方库将小部件渲染到屏幕上(Okta的SignInWidget).窗口小部件的呈现方式如下:
this.oktaSignInWidget.renderEl(
{ el: '#widget-container' },
() => {},
err => {
console.error(err);
}
);
我最初的想法是把它放到一个指令中,但即使有指令你也应该让Renderer2进行渲染.这里有最好的做法吗？
我想获取所有以id'div'开头的div。为此，我使用@ViewChildren但由于我有一个空数组而无法访问div，为什么？
我的范本
<div id="div-1">Div 1</div>
<div id="div-2">Div 2</div>
<input type="button" (click)="getDivs()">
零件
@ViewChildren('div') divs: QueryList<any>;
divList : any[];
getDivs(){
this.divList = this.divs.filter(x => x.id.lastIndexOf('div-', 0) === 0);
console.log(this.divList);
// this.divList return an empty array but i should have two results
}
我有一个自定义角度组件<sample-cmp></sample-cmp>
当它的内容通过 Renderer2 附加到 DOM 中时，它的内容不会在浏览器中呈现。
请找到我用来通过 Renderer2 渲染自定义 Angular 6 组件的以下代码
@ViewChild('formParent')
public elmRef: ElementRef;
constructor(public renderer: Renderer2) {
}
const domElm = renderer.createElement('sample-cmp');
renderer.appendChild(elmRef.nativeElement, domElm);
上面的代码将在 UI 中生成以下标签。
<sample-cmp></sample-cmp>
但此“sample-cmp”模板包含“Hello World”文本，但未呈现。
我的问题是，当我们使用渲染器 2 渲染一个自定义组件时，自定义组件模板中的内容不会被渲染。
我为输入元素创建了一个自定义表单控件（使用 ControlValueAccessor），具有以下用于 writeValue 方法的代码。
@ViewChild('inputElement', {static: true}) input;
writeValue(obj: any): void {
this.renderer.setAttribute(this.input.nativeElement, 'value', obj);
}
此方法仅更新视图（输入元素）一次，即我初始化表单时。如果我手动修补与上述组件关联的表单控件的值，则表单控件会更新，但视图不会更新。
但是，如果我使用setProperty方法而不是setAttribute方法，如下所示，
@ViewChild('inputElement', {static: true}) input;
writeValue(obj: any): void {
this.renderer.setProperty(this.input.nativeElement, 'value', obj);
}
视图得到更新。
但问题是，文档说value是HTML 中的一个属性，而不是dom 属性。
有人能解释一下 HTML 中的属性和属性有什么区别，这在 Angular 的 Renderer2 中产生了这种行为吗？
如何在 Renderer2.addClass(); 方法上添加多个类
例子：
this.renderer.addClass(this.el.nativeElement, 'btn btn-primary')
当我尝试这样做时，我收到错误：
ERROR DOMException: Failed to execute 'add' on 'DOMTokenList': The token provided ('btn btn-primary') contains HTML space characters, which are not valid in tokens.
at EmulatedEncapsulationDomRenderer2.addClass
当尝试使用 Renderer2 创建选项卡组件来选择选项卡元素，并尝试添加一些 css 类来更改颜色（例如当前未选择的选定选项卡）时，HTML 元素从 DOM 中完全消失：
这是选项卡 html 模板：
<div class="detail-nav">
<div class="nav-item-1">
<a routerLink="main-config" routerLinkActive="active" (click)=actionItem1()>
<span>Main config</span>
</a>
</div>
<div class="nav-item-2">
<a routerLink="sub-config" routerLinkActive="active" (click)=actionItem2()>
<span>Handling data</span>
</a>
</div>
<div class="nav-item-3">
<a routerLink="editing" routerLinkActive="active" (click)=actionItem3()>
<span>Editing</span>
</a>
</div>
<div>
我添加了一些 css 以使锚标记与父 div 具有相同的高度，
所以当使用 Renderer2 时：
...
constructor(private route: ActivatedRoute, private renderer: Renderer2) {}
...
let elm = this.renderer.selectRootElement(".nav-item a");
this.renderer.addClass(elm, 'nav-item');
CSS：
.nav-item {
background-color: LightBlue;
}
然后执行时 achor 标签会从 DOM 中完全消失：
.nav-item { …我正在尝试将 Vanilla JavaScript 代码转换为 Angular 2+。
在 Javascript 中，我有这样的声明：
document.documentElement.style.setProperty(`--${cssVariableName}`, value);
在 Angular 中，我发现复制上述语句的唯一方法是这样的：
renderer.setProperty(document.documentElement, 'style', `--${cssVariableName}: ${value}`);
问题：如果我在不同时间动态设置多个自定义属性（--cssVariable1、--cssVariable2...）。Angular Renderer 将覆盖 style 属性而不是附加到 style 属性。
渲染器可以用来实现这个功能吗？如果没有，是否有在 Angular 中使用 CSS 自定义属性的首选方法？谢谢！
我正在尝试以角度向本机元素添加多种样式，目前正在使用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});