无法读取未定义 Angular 6 的属性“nativeElement”

Posted 2023-02-22

【中文标题】无法读取未定义 Angular 6 的属性“nativeElement”

【英文标题】：Cannot read property 'nativeElement' of undefined Angular 6

【发布时间】：2019-03-17 14:13:44

【问题描述】：

我正在尝试为我的应用创建自定义 Spinner 组件，所以我已经创建了

spinner.component.ts

export class SpinnerComponent implements AfterViewInit 

    @ViewChild("spinner") spinner: ElementRef;

    constructor()  

    ngAfterViewInit(): void 
        this.spinner.nativeElement.style.display = "none";
    

    public show = (): void =>  this.spinner.nativeElement.style.display = "block"; ;

    public hide = (): void =>  this.spinner.nativeElement.style.display = "none"; ;

spinner.component.ts

<img #spinner src="assets/images/dotSpinner.gif" class="loading"/>

我正试图在我的其他组件中控制这个微调器，比如

sample.component.ts

import  SpinnerComponent  from "../spinner/spinner.component";

export class SimpleComponent 

    private spinner: SpinnerComponent = new SpinnerComponent();

    constructor() 

    actionHandler = (data: any): void => 
        this.spinner.show();
        this.clientActionService.subscribe(
            data => 
                this.spinner.hide();
                this.clientAction = data;
            ,
            err => 
                this.spinner.hide();
            
        );
    

但我遇到了错误 错误类型错误：无法读取未定义的属性“nativeElement” 在 SpinnerComponent.show

【问题讨论】：

您不应该手动创建组件实例。使用上面建议的查询（ViewChild，ContentChild）或DI机制。

我试过了，但我收到类似 ERROR 错误：StaticInjectorError(AppModule)[SimpleComponent -> SpinnerComponent]: StaticInjectorError(Platform: core)[SimpleComponent -> SpinnerComponent]: NullInjectorError: No provider对于 SpinnerComponent！

我确实在 app.module.ts 上注册过

【参考方案1】：

如果你想要解决方法，那么

<img
    [ngStyle]="'display': displayVal"
    src="assets/images/dotSpinner.gif"
    class="loading"/>

打字稿代码

display = "none";
public show = (): void =>  this.displayVal = "block"; ;
public hide = (): void =>  this.displayVal = "none"; ;

【讨论】：

方法正在调用但无法隐藏/显示微调器 Img

【参考方案2】：

使用 forwardRef

forwardRef 用于当我们需要引用的令牌时 DI 的用途已声明，但尚未定义。它也用于 我们在创建查询时使用的令牌尚未定义。

   import  SpinnerComponent  from "../spinner/spinner.component";   
    export class SimpleComponent    
        constructor(constructor(@Inject(forwardRef(() => SpinnerComponent )) private ref:any)) 

        actionHandler = (data: any): void => 
            this.ref.show();
            this.clientActionService.subscribe(
                data => 
                    this.ref.hide();
                    this.clientAction = data;
                ,
                err => 
                    this.ref.hide();
                
            );
        

    

【讨论】：

Getting ERROR 错误：StaticInjectorError(AppModule)[SimpleComponent -> SpinnerComponent]: StaticInjectorError(Platform: core)[SimpleComponent -> SpinnerComponent]: NullInjectorError: No provider for SpinnerComponent！

将 SpinnerComponent 添加为 appModule 中的 entryComponent

你确实在 appModule 中将 SpinnerComponent 注册为 entryComponent 但仍然没有运气

【参考方案3】：

spinner.component.ts // html 代码

 <img *ngIf="isShowSpinner" src="assets/images/dotSpinner.gif" class="loading"/>

 <button (click)="show()"> Show </button>
 <button (click)="hide()"> Hide </button>

spinner.component.ts //打字稿代码

public isShowSpinner: boolean = false;
constructor()  

public show()  this.isShowSpinner = true;     
public hide()  this.isShowSpinner = false; 

请试试这个。

【讨论】：

方法正在调用但无法隐藏/显示微调器 Img

你是哪个方法使用“显示”和“隐藏”函数调用的？ （例如 onclick、click、change）

在示例组件上的 click() 上，我试图调用 Spinner 组件的 show()

感谢@Bhavin，但我们不能在微调器组件上设置按钮，我想处理来自其他组件的微调器，例如当 api 调用触发时，我们需要在 api 调用时显示微调器指示用户等待完成了我们可以隐藏它