Question

我已经在angular 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 总是返回undefined有没有办法在按钮点击指令上获取值

Answer 1

您可以试试这个包ng2 summernote

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，使用在作为另一个评论者指出的组件的视图init之后，元素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基本上可以访问指令所在的textarea对象的所有DOM属性。或多或少，如果你通过id查询textarea元素，它会给你jQuery给你的东西。您可以使用this.el.nativeElement.attributeNameHere访问/设置大多数属性（尽管更好的选择是在必要时使用Angular的Renderer2类进行DOM操作，以防止与浏览器DOM的紧密耦合）不需要单独的元素属性或jQuery。通常，输入由ngOnInit（）时间解析并可用，并且DOM属性/元素由ngAfterViewInit（）时间解析并可用。

Answer 3

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

我导入NgModel并在summernote更改触发时更新它。

如何通过指令获得价值观具有Angular 4的ngModel

3 个答案: