微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

从渲染器迁移到renderer2

如何解决从渲染器迁移到renderer2

我将项目从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)
    ...

Renderer的课程怎么样?


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,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,nextElem);
    }

使用renderer2时,尽管creatElement方法具有相同的名称,但它不再以相同的方式工作,而且我对文档的正确方法理解得还不是很清楚。

解决方法

NativeElement(div)我认为它具有禁用的属性,因为在您的示例中没有看到禁用属性的任何地方,

该元素没有禁用的属性。 如果您需要添加已禁用且没有错误的

,则可以使用该示例

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

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。