SimpleMDE with Angular 6 获取组件中编辑器的引用

Question

到目前为止我做了什么？

我已经在我的 angular 6 应用程序中成功实施了 SimpleMDE，并且运行良好。但是，我正在努力获取组件中编辑器的引用。

我想要的

我想在我的组件的一个函数中访问 simplemde 编辑器，这样我就可以调用它的方法来显示我从服务响应中获得的降价。

有什么问题？

我是 angular 的新手，不知道如何在我的组件中获取模块中初始化的内容的引用。这是我的代码，可以更好地解释它：

关注这个link：

https://www.npmjs.com/package/ng2-simplemde

我的模块

import { NgModule } from '@angular/core'
    import { SimplemdeModule, SIMPLEMDE_CONFIG } from 'ng2-simplemde'
    @NgModule({
      imports: [
        SimplemdeModule.forRoot({
          provide: SIMPLEMDE_CONFIG,
          // config options 1
          useValue: {}
        })
      ],
      bootstrap: [AppComponent]
    })
    export class AppModule { }

我的组件.ts

export class QuestionComponent implements OnInit, OnDestroy {
option2 = {placeholder: '# Welcome!! show your talent here.',
    promptURLs: true,
    renderingConfig: {codeSyntaxHighlighting: true},
    showIcons: ['code', 'table'],
    toolbar: [
        'bold',
        'italic',
        'heading',
        'code',
        'quote',
        'unordered-list',
        'ordered-list',
        {
            name: 'custom',
            action: function showit(editor) {
                this.demo.customFunction(editor, this.demo);
            } ,
            className: 'fa fa-picture-o',
            title: 'Custom Button',
            demo : this.vm
        },
        'table',
        'link',
        'horizontal-rule',
        'preview',
        'side-by-side',
        'fullscreen',
        'guide',
    '|', // Separator
]};

constructor() {}

//some other methods

}

我的组件.html

<div class="row">
    <div class="col-md-6"><simplemde *ngIf="questions" [(ngModel)]="something" [options]="option2"></simplemde></div>

</div>

到目前为止一切顺利。但是我需要像这样在我的组件中处理以前保存的降价：

converttohtml(){
// call some serrvice and get reponse 
this.oldhtml = this.simplemde.options.previewRender(response.markdown);
}

我不知道如何用这个方法得到this.simplemde。有帮助吗？

注意：我不想创建简单的自定义工具栏按钮。我需要这样做以响应休息电话。

谢谢

Answer 1

您可以通过多种方式获取组件的引用。

一种方法是使用 @ViewChild 和组件类型。另一种方法是使用 @ViewChild 和模板变量。

如果要使用模板变量，请向模板添加一个，如下所示（在 simplemde 标记内添加 #simplemde）。

<simplemde #simplemde [options]="option2"></simplemde>

这是托管组件的 TS 代码：

import { Component, ViewChild } from '@angular/core';
import { Simplemde } from 'ng2-simplemde';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    // Try this
    @ViewChild(Simplemde) simplemde: Simplemde; // @ViewChild and component type
        // OR this
    @ViewChild('simplemde') simplemde: Simplemde; // @ViewChild and template variable

    option2 = {};

    // then you can refer the component like you want
    convertToHtml(){
        // call some service and get reponse 
        this.oldhtml = this.simplemde.options.previewRender(response.markdown);
    } 
}

More info on ViewChild

SimpleMDE with Angular 6 获取组件中编辑器的引用

SimpleMDE with Angular 6 get reference of editor in component

angular

simplemde