如何获得符合指令及ngModel值与角4

问题描述：

我已经创建了一个指令，在角2，它初始化它是工作的罚款summernote文本编辑器，但我无法得到它的价值，它总是返回未定义与ngModel如何获得符合指令及ngModel值与角4

指令代码：

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有没有什么办法让按钮值与指令点击

您可以创建一个plnkr或stackblitz来演示这一点。 – Skeptor

你需要编写你自己的controlvalueaccessor来同步控制值和ngModel –

答

HI，你可以试试这个包ng2 summernote

是的，它不工作，有15个问题全部打开 –

嗨，如果你需要所见即所得的编辑器，你可以使用https://github.com/chymz/ng2 -appeitor – Robert

答

我不清楚你想要做什么。为什么选择jQuery？它完全没有必要，我不确定它是否会在这方面做任何事情，但它绝对没有任何帮助。

我真的不明白是怎么指令和成分有关系，虽然。如果你只是想打印/访问PostContent和PostTitle的组件，你不应该需要一个指令在所有的这一点。

的另一个问题是，访问一个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（不要你可以在指令中使用ngOnInit，对于组件视图初始化后，用另一个评论者指出的那样，元素裁判是在指令立即可用）

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基本上，您可以访问textarea的所有DOM属性对象的指令被放置在。或多或少，如果你通过id查询textarea元素，jQuery会给你什么。您可以访问/设置使用this.el.nativeElement.attributeNameHere大多数属性（但更好的选择是，如果需要使用角的Renderer2类DOM操作，以防止紧耦合与浏览器的DOM）无需单独的元素属性或jQuery的。典型地，输入由ngOnInit（）时间分辨和可用的，和DOM属性/元素由ngAfterViewInit（）时间分辨和可用。

'ElementRef'在构造函数中可用，他使用jQuery，因为summernote使用它＃ – yurzui

'＃PostContent =“ngModel”'为什么在这里？他只想获得值，而不是'NgModel'指令 – yurzui

它与[（ngModel）]做同样的事情，而且还定义了一个名为PostContent的本地模板变量，该过程中的其他模板元素可以访问该变量。它对于使用ngModel只是一个不同的符号，它将stlil将textarea的内容绑定到名为PostContent的变量，反之亦然。如果使用香蕉箱符号，则只能访问组件中声明的变量，或者如果将整个组包装在NgForm元素中，然后可以使用表单名称访问模板中的单个ngModel属性。 – diopside

答

我不知道，如果它的正确方法或没有，但这个工作对我来说：

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变化触发更新。

如何获得符合指令及ngModel值与角4

相关推荐