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

【问题标题】：Angular 7 + NG Bootstrap, open modal from a Service?Angular 7 + NG Bootstrap，从服务中打开模式？
【发布时间】：2019-04-15 06:14:09
【问题描述】：

我对 Angular 有点陌生，我正在尝试创建一个检查 localstorage 的服务，如果所需的密钥不存在，则打开一个 Modal 询问名称以创建该 localstorage 密钥。

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

我不知道自己做错了什么，也找不到很多关于此的信息。

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

代码如下：

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


}

【问题讨论】：

不相关，但考虑在您的模板中将var 更改为let 或const。是一种更好的做法。
我对 NgBootstrap 不太熟悉，但我认为您缺少一些应该在应用中导入的样式。
谢谢@dream88，你是对的。
@DanR。但这仅在我从该服务打开模板时发生，当我在组件上对其进行测试时，它可以在不添加任何样式的情况下工作
@Maty 尝试将 css 移动到您的 styles.css 中，以便 css 不依赖 shadow dom 选择器（css 范围）。

标签： angular ng-bootstrap angular7

【解决方案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 不支持。

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

【讨论】：

【解决方案2】：

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

之后，如果您遇到错误No component factory found for ...，请阅读以下内容：
Angular 4: no component factory found,did you add it to @NgModule.entryComponents?

【讨论】：