无法读取属性' nativeElement' of undefined - ngAfterViewInit

时间:2017-05-01 00:05:32

标签: html angular typescript angular2-forms angular2-directives

我试图添加一个"剪贴板"使用this example的指令。该示例现已过时,因此我不得不更新它如何获取nativeElement。

我收到了错误

  

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

我在代码中标记了错误,其中包含< =====错误:

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>

如何摆脱这个错误?

更新为不使用AfterViewInit,因为它不是视图...同样的错误:

@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);

我想我不需要使用@viewChild,因为它不是一个组件,但我不确定如何填充eleltRefel仅用于替换eltRef,因为我无法填充eltRef

1 个答案:

答案 0 :(得分:4)

您将.命名为eltRef,但尝试在ElementRef中使用this.el。您需要使用相同的名称。

这将有效:

ngAfterViewInit