从渲染器迁移到渲染器2答案

【问题标题】：migrate from renderer to renderer2从渲染器迁移到渲染器2
【发布时间】：2020-09-25 11:45:23
【问题描述】：

我将一个项目从 Angular 7 迁移到 8，我不得不将 Renderer 类更改为 Renderer2，我遇到了以下错误：

ERROR Error: Template error: Can't bind to 'disabled' since it isn't a known property of 'div'.
    at createUnknownPropertyError (vendor.js:83083)
    at validateAgainstUnknownProperties (core.js:12699)
    at elementPropertyInternal (core.js:12604)
    ...

使用渲染器的课程怎么样：


import { OnInit, Directive, Input, Renderer, ElementRef } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { Response } from '@angular/http';
import { Loader } from './loader';

@Directive({
    selector: '[asCardLoader]'
})

export class CardDirective implements OnInit {

    private nativeElement: Node;
    private loaderElement: Node;

    constructor(private renderer: Renderer, private element: ElementRef) {
        this.nativeElement = element.nativeElement;
    }

    ngOnInit() {
        if (this.loader) {
            this.initLoader();
        }

    showLoading() {
        const divElement = this.renderer.createElement(this.nativeElement, 'div');
        this.renderer.setElementClass(divElement, 'card-loading', true);
        this.renderer.setElementStyle(divElement, 'display', 'block');
        this.loaderElement = divElement;
        const nextElem = this.element.nativeElement.nextElementSibling;
        const parent = this.element.nativeElement.parentNode;
        parent.insertBefore(divElement, nextElem);

// other methods

我对 renderer2 的尝试


import { OnInit, Directive, Input, Renderer2, ElementRef } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { Response } from '@angular/http';
import { Loader } from './loader';

@Directive({
    selector: '[asCardLoader]'
})
export class CardLoaderDirective implements OnInit {

    private nativeElement: Node;
    private loaderElement: Node;

    @Input()
    private loader: Loader;

    constructor(private renderer: Renderer2, private element: ElementRef) {
        this.nativeElement = element.nativeElement;
    }

    ngOnInit() {
        if (this.loader) {
            this.initLoader();
        }
    }

    showLoading() {
        const divElement = this.renderer.createElement('div');
        this.renderer.appendChild(this.nativeElement, divElement);
        this.renderer.addClass(divElement, 'card-loading');
        this.renderer.setStyle(divElement, 'display', 'block');
        this.loaderElement = divElement;
        const nextElem = this.element.nativeElement.nextElementSibling;
        const parent = this.element.nativeElement.parentNode;
        parent.insertBefore(divElement, nextElem);
    }

对于 renderer2，creatElement 方法尽管名称相同，但不再以相同的方式工作，而且我从文档中不太了解应该进行此转换的正确方式。

【问题讨论】：

标签： javascript angular typescript angular8 angular-renderer2

【解决方案1】：

NativeElement (div) 我假设它有 disabled 属性，因为我在你的示例中没有看到任何 disabled 属性，

该元素没有 disabled 属性。如果您需要添加禁用而不会出错，您可以使用该示例

<div [attr.disabled]="condition ? true : null">

【讨论】：