Angular 7 + NG Bootstrap, открыть модал от Сервиса? - PullRequest
Новая
       15

Angular 7 + NG Bootstrap, открыть модал от Сервиса?

0 голосов
/ 12 ноября 2018

Я в новинку с Angular, я пытаюсь создать сервис, который проверяет локальное хранилище, и, если нужного ключа нет, откройте модал, запрашивающий имя для создания этого ключа локального хранилища.

Однако модальныйоткрывается, но я вижу только «отключенный» фон, а не модальную информацию.

Я не знаю, что я делаю неправильно, и я не могу найти много информации об этом.

Не знаюЕсли служба это правильный способ сделать это, и я хотел бы помочь с этим.Кроме того, обслуживание в зависимости от других услуг является хорошей практикой?

Вот код: 

import { Injectable } from '@angular/core';
import { NgbModal, ModalDismissReasons } from '@ng-bootstrap/ng-bootstrap';
import { localStorageService } from './localStorage.service';

let template: `<ng-template #content let-modal let-c="close" let-d="dismiss">
                    <div class="modal-header">
                        <h4 class="modal-title">Insert Your Name</h4>
                    </div>
                    <div class="modal-body">
                        <form>
                            <div class="input-group">
                                <input [(ngModel)]='name' id="name" class="form-control" name="name">
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-outline-dark" (click)="saveName(name);c('Save Click')">Save</button>
                    </div>
                </ng-template>`

@Injectable({
    providedIn: 'root'
})

export class CheckuserService {

    private closeResult: String;

    constructor(private modalService: NgbModal, private lss: localStorageService, ) { }

    test() {
        if (this.lss.getStorage() !== "null") {
            this.modalService.open(template, { ariaLabelledBy: 'modal-basic-title' }).result.then((result) => {
                this.closeResult = `Closed with: ${result}`;
            }, (reason) => {

            });
        } else {
            console.log("Already logged")
        }
    }


}

1 Ответ

0 голосов
/ 13 ноября 2018

Извините - я не заметил в своем комментарии, что вы открываете шаблон из сервиса и шаблон представляет собой строку .

Если вы посмотрите документацию NgBoostrap - он открывает TemplateRef или тип Component, а не строку.

open open (содержимое: любое, параметры: NgbModalOptions) => NgbModalRef

Открывает новое модальное окно с указанным контентом и использованием прилагаемого опции. Контент может быть предоставлен как TemplateRef или тип компонента . Если вы передаете тип компонента в качестве содержимого, чем экземпляры этих компоненты могут быть внедрены с экземпляром NgbActiveModal учебный класс. Вы можете использовать методы класса NgbActiveModal, чтобы закрыть / отклонять модалы "изнутри" компонента.

Когда вы ссылаетесь на <ng-template> внутри компонента, например
ViewChild('tplRef', {read: TemplateRef}) myTplRef: TemplateRef;

Создает объект TemplateRef (который вы позже передаете модальной службе NgBootstrap). С другой стороны, вы пытаетесь передать строку, которую NgBootstrap не поддерживает.

Следовательно, вы должны передавать ссылку на шаблон / компонент в качестве параметра при вызове вашей службы.

...