Angular 7 + NG Bootstrap，从服务打开模式？

Question

我是 Angular 的新手，我正在尝试创建一个检查 localstorage 的服务，如果没有所需的密钥，请打开一个 Modal 请求名称以创建该 localstorage 密钥。

但是，模态打开但我只看到 "disabled" 背景，看不到模态信息。

我不知道我做错了什么，我找不到很多关于这个的信息。

不知道某项服务是否是执行此操作的正确方法，我需要一些帮助。另外，服务依赖于其他服务是一种好做法吗？

代码如下：

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

抱歉 - 我在评论中没有注意到您从服务中打开模板并且模板是 string.

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

open open(content: any, options: NgbModalOptions) => NgbModalRef

Opens a new modal window with the specified content and using supplied options. Content can be provided as a TemplateRef or a component type. If you pass a component type as content than instances of those components can be injected with an instance of the NgbActiveModal class. You can use methods on the NgbActiveModal class to close / dismiss modals from "inside" of a component.

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

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

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

Answer 2

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

之后，如果出现错误 No component factory found for ...，请阅读以下内容：

Angular 7 + NG Bootstrap，从服务打开模式？

Angular 7 + NG Bootstrap, open modal from a Service?

ng-bootstrap

angular

angular7