2

到目前为止我做了什么？

我已经在我的 Angular 6 应用程序中成功实现了 SimpleMDE，它运行良好。但是我正在努力在我的组件中获得编辑器的引用。

我想要的是

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

问题是什么？

我是角度的新手，不知道如何在我的组件中获取在模块中初始化的东西的引用。这是我的代码来更好地解释它：

按照这个链接：

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 。有什么帮助吗？

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

谢谢

4

1 回答 1

2

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

一种方法是使用@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);
    } 
}

有关 ViewChild 的更多信息

于 2018-09-22T00:09:35.657 回答