Question

到目前为止我做了什么？

我已经在我的angular 6应用程序中成功实现了SimpleMDE，并且运行良好。但是，我很难在组件中获得编辑器的参考。

我想要的

我想访问组件功能内的 simplemde编辑器，以便可以调用其方法来显示我从服务响应中获得的减价。

出什么问题了？

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

跟随此链接：

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>

到目前为止，一切都很好。但是我需要像这样在组件中处理以前保存的markdown：

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

我不知道如何通过此方法获取 this.simplemde 。有帮助吗？

注意：我不想创建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

带有Angular 6的SimpleMDE获得组件中编辑器的引用

1 个答案: