Question

我对Angular有点陌生，我试图提供一种检查本地存储的服务，如果没有所需的密钥，则打开一个Modal询问创建该本地存储密钥的名称。

但是，模式会打开，但我只会看到“已禁用”背景，而看不到模式信息。

我不知道我在做什么错，我找不到很多与此有关的信息。

不知道服务是否是正确的方法，我希望对此有所帮助。另外，服务取决于其他服务是一种好习惯吗？

代码如下：

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")
        }
    }


}

Answer 1

抱歉-我没有在评论中注意到您从服务中打开了模板，并且模板是字符串。

如果您查看NgBoostrap的文档-它会打开TemplateRef或Component类型-而不是字符串。

open open（content：any，options：NgbModalOptions）=> NgbModalRef

使用指定的内容打开新的模态窗口，并使用提供的内容   选项。 内容可以作为TemplateRef或组件类型提供。   如果您将组件类型作为内容传递，而不是那些实例   组件可以注入NgbActiveModal的实例   类。您可以使用NgbActiveModal类上的方法关闭/   从组件的“内部”消除模态。

当您在类似
的组件内引用<ng-template>时 ViewChild('tplRef', {read: TemplateRef}) myTplRef: TemplateRef;

它创建一个TemplateRef对象（稍后将其传递给NgBootstrap模态服务）。另一方面，您要尝试的是传递一个字符串-NgBootstrap不支持。

因此，在调用服务时，应将模板引用/组件作为参数传递。

Answer 2

我找到了适合我的解决方案：
https://gist.github.com/jnizet/15c7a0ab4188c9ce6c79ca9840c71c4e#gistcomment-3007209

在那之后，如果您遇到错误 没有找到适用于...的组件工厂 ，请阅读以下内容：
Angular 4: no component factory found,did you add it to @NgModule.entryComponents?

Angular 7 + NG Bootstrap，可以通过服务打开模式吗？

2 个答案: