未定義のプロパティ 'nativeElement'を読み取ることができません - ngAfterViewInit

Question

私はthis exampleを使用して "クリップボード"指示を追加しようとしています。今の例は古くなっていますので、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> 

どうすればそのエラーを取り除くことができますか？

@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使用しないでする必要がありますが、どのようにわからないと思う：それはビュー...同じエラーではありませんので、AfterViewInitを使用しないように更新

elまたはeltRefを入力します。 elは、eltRefを埋め込むことができなかったため、eltRefを置き換えるだけです。

Answer 1

elementRefをeltRefとして指定しますが、ngAfterViewInitにthis.elを使用してください。同じ名前を使用する必要があります。

これは動作します：

constructor(private el:ElementRef) { 
} 

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