无法读取未定义的属性'nativeElement' - ngAfterViewInit [英] Cannot read property 'nativeElement' of undefined - ngAfterViewInit

问题描述

我试图使用这个例子添加一个剪贴板指令。这个例子现在已经过时了，所以我不得不更新它是如何得到nativeElement的。

我得到错误

无法读取未定义的属性'nativeElement'

我在代码中标记了错误< =====错误在这里：

clipboard.directive.js

<@ p $ p> 来自@ angular / core的import {Directive，ElementRef，Input，Output，EventEmitter，ViewChild，AfterViewInit};
从剪贴板导入剪贴板;

@Directive（{
selector：[clipboard]
}）
导出类ClipboardDirective implements AfterViewInit {
clipboard：Clipboard;

@Input（剪贴板）
elt：ElementRef;

@ViewChild（bar）el;

@Output（）
clipboardSuccess：EventEmitter< any> = new EventEmitter（）;

@Output（）
clipboardError：EventEmitter< any> = new EventEmitter（）;

构造函数（private eltRef：ElementRef）{
}

ngAfterViewInit（）{
this.clipboard = new剪贴板（this.el.nativeElement， {< ======错误在这里
target：（）=> {
return this.elt;
}
} as any）;

this.clipboard.on（success，（e）=> {
this.clipboardSuccess.emit（）;
}）;

this.clipboard.on（error，（e）=> {
this.clipboardError.emit（）;
}）;


ngOnDestroy（）{
if（this.clipboard）{
this.clipboard.destroy（）;



code>

html strong>

 < div class =website* ngIf =xxx.website！== undefined>< （点击）=someclickmethod（）> {{xxx.website}}< / a>< / div> a #foo href ={{formatUrl 
< button＃bar [clipboard] =foo（clipboardSuccess）=onSuccess（）>复制< / button> 
  

我如何摆脱这个错误？

   > @Directive（{
选择器：[剪贴板]
}）
导出类ClipboardDirective实现OnInit {
剪贴板：剪贴板; 
 
 @Input（剪贴板）
 elt：ElementRef; 
 
 @ViewChild（bar）el; 
 
 @Output（）
 clipboardSuccess：EventEmitter< any> = new EventEmitter（）; 
 
 @Output（）
 clipboardError：EventEmitter< any> = new EventEmitter（）; 
 
构造函数（private eltRef：ElementRef）{
} 
 
 ngOnInit（）{
 this.clipboard = new剪贴板（this.el.nativeElement， {
 target：（）=> {
 return this.elt; 
} 
} as any）; 
  

我认为我不需要使用@viewChild，因为它不是一个组件，但不确定如何填充 el 或 eltRef 。 el 仅用于替换 eltRef ，因为我无法填充 eltRef 。

解决方案

您将名称 ElementRef 设为eltRef，在 ngAfterViewInit 中使用 this.el 。您需要使用相同的名称。

这将起作用：

 构造函数（private el：ElementRef）{
} 
 
 ngAfterViewInit（）{
 this.clipboard = new剪贴板（this.el.nativeElement，{
 target： （）=> {
 return this.elt; 
} 
} 
  

I'm trying to add a "clipboard" directive using this example. The example is now outdated so I have had to update how it is getting the nativeElement.

I'm getting the error

Cannot read property 'nativeElement' of undefined

I have marked the error in the code with <===== error here:

clipboard.directive.js

import {Directive,ElementRef,Input,Output,EventEmitter, ViewChild, AfterViewInit} from "@angular/core";
import Clipboard from "clipboard";

@Directive({
  selector: "[clipboard]"
})
export class ClipboardDirective implements AfterViewInit {
  clipboard: Clipboard;

   @Input("clipboard")
   elt:ElementRef;

  @ViewChild("bar") el;

  @Output()
  clipboardSuccess:EventEmitter<any> = new EventEmitter();

  @Output()
  clipboardError:EventEmitter<any> = new EventEmitter();

  constructor(private eltRef:ElementRef) {
  }

  ngAfterViewInit() {
    this.clipboard = new Clipboard(this.el.nativeElement, {   <======error here
      target: () => {
        return this.elt;
      }
    } as any);

    this.clipboard.on("success", (e) => {
      this.clipboardSuccess.emit();
    });

    this.clipboard.on("error", (e) => {
      this.clipboardError.emit();
    });
  }

  ngOnDestroy() {
    if (this.clipboard) {
      this.clipboard.destroy();
    }
  }
}

html

<div  class="website" *ngIf="xxx.website !== undefined"><a #foo href="{{formatUrl(xxx.website)}}" target="_blank" (click)="someclickmethod()">{{xxx.website}}</a></div>
                                        <button #bar [clipboard]="foo" (clipboardSuccess)="onSuccess()">Copy</button>

How do I get rid of that error?

Updated to not use AfterViewInit because it is not a view...same error:

@Directive({
  selector: "[clipboard]"
})
export class ClipboardDirective implements OnInit {
  clipboard: Clipboard;

   @Input("clipboard")
   elt:ElementRef;

  @ViewChild("bar") el;

  @Output()
  clipboardSuccess:EventEmitter<any> = new EventEmitter();

  @Output()
  clipboardError:EventEmitter<any> = new EventEmitter();

  constructor(private eltRef:ElementRef) {
  }

  ngOnInit() {
    this.clipboard = new Clipboard(this.el.nativeElement, {
      target: () => {
        return this.elt;
      }
    } as any);

I think I need to not use @viewChild because it is not a component but am unsure how to populate el or eltRef. el is only there to replace eltRef because I couldn't populate eltRef.

解决方案

You name ElementRef as eltRef but try to use this.el in ngAfterViewInit. You need to use the same name.

this will work:

constructor(private el:ElementRef) {
}

ngAfterViewInit() {
  this.clipboard = new Clipboard(this.el.nativeElement, { 
  target: () => {
    return this.elt;
  }
} 

这篇关于无法读取未定义的属性'nativeElement' - ngAfterViewInit的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！