如何使用 Directive 和 ngModel 使用 Angular 4 获取值

Question

我在角度 2 中创建了一个指令，该指令正在初始化 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总是返回未定义的，有没有办法在按钮单击时获取值 带有指令

Answer 1

嗨，你能试试这个包吗 ng2 夏季笔记

Answer 2

我不太清楚你想做什么。 为什么选择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，在视图初始化后使用组件，正如另一位评论者指出的那样，元素 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 属性。它或多或少地为您提供了jQuery在按id查询该textarea元素时会给您的内容。您可以使用this.el.nativeElement.attributeNameHere访问/设置大多数属性(尽管更好的选择是在必要时使用Angular的Renderer2类进行DOM操作，以防止与浏览器DOM紧密耦合( 不需要单独的元素属性或jQuery。通常，输入由ngOnInit((时间解析并可用，DOM属性/元素由ngAfterViewInit((时间解析并可用。

Answer 3

我不确定它是否正确，但这个对我有用：

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 并在夏季笔记更改触发时更新它。