ディレクティブとngModelの値を角度4で取得する方法

Question

角2で1つのディレクティブを作成しました。これは正常に機能するsummernoteテキストエディタですが、ngModelで未定義の値を返すことはできません

指令コード：

import { Directive, ElementRef, Input, Output, EventEmitter } from '@angular/core'; 

declare var $: any; 

@Directive({ selector: '[summernote]' }) 

export class summernoteDirective { 

    @Input() config; 

    element:any; 

    constructor(el: ElementRef) { 
     this.element = el.nativeElement; 
    } 

    ngOnInit() 
    { 
     $(this.element).summernote(this.config); 
    } 
} 

コンポーネントコードHTML：

<input type="text" name="PostTitle" [(ngModel)]="PostTitle" 
     class="form-control" placeholder="Post title"> 
<textarea name="PostContent" [(ngModel)]="PostContent" 
     summernote [config]="options"></textarea> 
<button (click)="submitPost(PostTitle,PostContent);" 
     class="btn btn-primary" data-toggle="dropdown">Post</button> 

コンポーネントTSコード：

submitPost(PostTitle,PostContent) 
{ 
    console.log(PostTitle); 
    console.log(PostContent); 
} 

第二コンソールPostContentは常にundefinedを返しディレクティブ

Answer 1

HIでクリックボタンの値を取得する方法はありますがng2 summernote

Answer 2

このパッケージを試すことができます私はあなたがしようとしていることについてはっきりしていません。なぜjQueryですか？そのことはまったく必要ありませんが、私はこの文脈で何かをするのかどうかは確かではありませんが、何かを助けてくれないのは間違いありません。

ディレクティブとコンポーネントがどのように関連しているかはわかりませんが、コンポーネントのPostContentとPostTitleを印刷/アクセスしようとしているだけの場合は、そのための指示は必要ありません。

もう1つの問題は、宣言された直後のテンプレートのngModel宣言の変数にアクセスするために、＃を使用してローカルテンプレート変数を示す別の表記法を使用する必要があると思います。これにより、隣接する要素ですぐに使用できるようになります。

はこれを試してみてください -

<input type="text" name="PostTitle" ngModel #PostTitle="ngModel" 
    class="form-control" placeholder="Post title"> 
<textarea name="PostContent" #PostContent="ngModel" ngModel 
    summernote [config]="options"></textarea> 
<button (click)="submitPost(PostTitle,PostContent);" 
    class="btn btn-primary" data-toggle="dropdown">Post</button> 

たぶん助けること。

あなたの命令で何をしようとしているのかは分かりませんが、注入された要素Refにアクセスしている場合は、おそらくEDITEDまで待つべきです（nigOnInit命令では、別のコメンターは、要素refはディレクティブですぐに利用可能である、指摘したように

import { Directive, ElementRef, Input, Output, EventEmitter } from '@angular/core'; 

@Directive({ selector: '[summernote]' }) 

export class summernoteDirective { 

    @Input() config; 

    constructor(private el: ElementRef) { } 

    ngOnInit() { 
     console.log(this.config) <- should print whatever is being sent as input to config property 
    } 

    ngOnInit() // edited this back to ngOnInit(), commenter below is right- you dont have to use ngAfterViewInit to access ElementRef's if they are being injected into a directive. They are available immediately 
    { 
     let buttonId = this.el.nativeElement.id; // random example 

    } 
} 

ジェクトelementRefは基本的にあなたがテキストエリアのすべてのDOM属性にアクセスできます）コンポーネントのビューの初期化後に使用ディレクティブが上に配置されているオブジェクト。それは多かれ少なかれ、idでそのtextarea要素をクエリした場合、jQueryが与えるものをあなたに与えます。 this.el.nativeElement.attributeNameHereを使用してほとんどのアトリビュートにアクセス/設定できます（ブラウザDOMとの緊密な結合を防ぐため、必要に応じてAngularのRenderer2クラスをDOM操作に使用する方が良いでしょう）。 別の要素プロパティjQuery。通常、入力はngOnInit（）時間で解決され、使用可能になり、DOM属性/要素はngAfterViewInit（）時間で解決され、使用可能になります。

Answer 3

私はその適切な方法かどうかが、この1つは私のために働いているかはわからない：

import { Directive, ElementRef, Input, Output, EventEmitter } from '@angular/core'; 
import { NgModel } from '@angular/forms'; 
declare var $: any; 

@Directive({ 
    selector: '[summernote]', 
    providers: [NgModel] 
}) 

export class summernoteDirective { 

    @Input() config; 

    element:any; 
    model:any; 

    constructor(el: ElementRef, ngModel: NgModel) { 
     this.element = el.nativeElement; 
     this.model = ngModel; 
    } 

    ngOnInit() 
    { 
     let that = this; 
     $(this.element).summernote(this.config); 
     $(this.element).on('summernote.change',function(e){ 
      that.model.update.emit(e.currentTarget.value); 
     }); 
    } 
} 

私はNgModelをインポートし、summernote変更がトリガされたときにそれを更新。