在 Angular 2 中绑定 Textarea

Question

我有一个关于如何使用 tinymce 的作业。我遵循了文档中的基本教程，但我不知道 ngModel 是否不能在 textarea 上工作。在我的代码中，我的onMessage函数中的htmlBody是提交我的textearea的内容。是否有不提交 htmlBody 内容的原因？当我触发 onMessage() 函数时，未提交 htmlBody 的内容。那是我的问题

    <div class="tiny">


     <div id="tinyFormGroup" class="form-group">
        <div  class="hidden">
            <textarea  [(ngModel)]="htmlBody" id="baseTextArea" name="body" >{{htmlBody}}</textarea>
        </div>
        </div>


    </div>
    <div class="form-group">
                  <button type="submit" class="btn btn-primary">Submit</button>


                </form>

    inputs: ['mceContent'],
        outputs: ['contentChanged'],
        providers:[HttpService]

export class EmailComponent {

    private elementRef: ElementRef;
    private elementID: string;
    private htmlBody = "Write Your Message Here";
    private title;




    public contentChanged: EventEmitter<any>;


    constructor(@Inject(ElementRef) elementRef: ElementRef, private httpService:HttpService)
    {
        this.elementRef = elementRef;

        var randLetter = String.fromCharCode(65 + Math.floor(Math.random() * 26));
        var uniqid = randLetter + Date.now();

        this.elementID = 'tinymce' + uniqid;
        this.contentChanged = new EventEmitter();


    }





    ngAfterViewInit()
    {
        //Clone base textarea
        var baseTextArea = this.elementRef.nativeElement.querySelector("#baseTextArea");
        var clonedTextArea = baseTextArea.cloneNode(true);
        clonedTextArea.id = this.elementID;

        var formGroup = this.elementRef.nativeElement.querySelector("#tinyFormGroup");
        formGroup.appendChild(clonedTextArea);






        tinymce.init(
            {


                mode: 'exact',
                height: 300,

                theme: 'modern',

                ],

                elements: this.elementID,
                setup: this.tinyMCESetup.bind(this)
            }
        );
    }

    tinyMCESetup(ed) {
        ed.on('keyup', this.tinyMCEOnKeyup.bind(this));
    }

    tinyMCEOnKeyup(e) {
        this.contentChanged.emit(tinymce.get(this.elementID).getContent());
    }

    set mceContent(content) {
      this.htmlBody = content;
    }

    onMessage(){


        this.httpService.addDraft(this.htmlBody)
        .subscribe(data => {


        })


    }
}

Answer 1

这是非常基本的，这就是我在不在文本区域上使用 ngModel 的情况下简单地做的事情。

export class EmailComponent {


        private htmlBody = "Write Your Message Here";

        sendMessage = {

          htmlBody = "";

        }

tinyMCEOnKeyup(e) {
        this.contentChanged.emit(tinymce.get(this.elementID).getContent());
       this.sendMessage.htmlBody = tinymce.get(this.elementID).getContent();
        this.contentChanged.emit(this.editor.htmlBody);

    }

onSubmit(){

        this.httpService.addDraft(this.sendMessage.htmlBody)
        .subscribe(data => {

        })

在 Angular 2 中绑定 Textarea

Binding Textarea in Angular 2

tinymce

angular-ngmodel

angular