SimpleMDE с Angular 6 получить ссылку на редактор в компоненте - PullRequest
Новая
       20

SimpleMDE с Angular 6 получить ссылку на редактор в компоненте

0 голосов
/ 22 сентября 2018

Что я уже сделал?

Я успешно внедрил SimpleMDE в мое приложение angular 6, и оно работает нормально.Однако я изо всех сил пытаюсь получить ссылку редактора в моем компоненте.

Что я хочу

Я хочу получить доступ к simplemde editor внутри функции моего компонента, чтобы я мог вызвать его метод для отображения уценкиЯ получаю ответ от службы.

В чем проблема?

Я новичок в 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>

Пока все хорошо.Но мне нужно обработать ранее сохраненную уценку в моем компоненте следующим образом: 

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

Я не знаю, как получить this.simplemde в этом методе.Любая помощь?

Примечание: я не хочу создавать пользовательскую кнопку панели инструментов simplemde.Мне нужно сделать это в ответ на звонок покоя.

Спасибо

1 Ответ

0 голосов
/ 22 сентября 2018

Вы можете получить ссылку на компонент несколькими способами.

Одним из способов является использование @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

...