Ng-bootstrap不呈现

Question

我试图像这样呈现一个模态:

HTML

<div class="btn-holder">
            <a (click)="this.open()" class="btn btn-success text-uppercase">Edit My Profile</a>
        </div>

模块:

imports: [BrowserModule, HttpModule,
    RouterModule.forRoot(appRoutes),
      NgbModule.forRoot(),
    EditProfileComponent

  ],

零件:

import {Component} from "@angular/core";

@Component({
    selector: 'edit-profile',
    templateUrl: './editProfile.html'
})
export class EditProfileComponent{

    constructor(){

    }

    submitForm(){

    }

}

问题是我不知道如何让它工作,因为文档含糊不清.建议吗？

我尝试过以下方法:

@Component({
    selector: 'edit-profile',
    templateUrl: './editProfile.html'
})
export class EditProfileComponent{

    closeResult: string;

    constructor(private modalService: NgbModal){ }

    open(content) {
        this.modalService.open(content).result.then((result) => {
            this.closeResult = `Closed with: ${result}`;
        }, (reason) => {
            this.closeResult = `Dismissed ${this.getDismissReason(reason)}`;
        });
    }

    private getDismissReason(reason: any): string {
        if (reason === ModalDismissReasons.ESC) {
            return 'by pressing ESC';
        } else if (reason === ModalDismissReasons.BACKDROP_CLICK) {
            return 'by clicking on a backdrop';
        } else {
            return  `with: ${reason}`;
        }
    }

}

HTML:

  <a (click)="open(content)" class="btn btn-success text-uppercase">Edit My Profile</a>
</div>

单击按钮时控制台出错:

ERROR TypeError: _co.open is not a function
    at Object.eval [as handleEvent] (ProfileComponent.html:46)
    at handleEvent (core.es5.js:12047)
    at callWithDebugContext (core.es5.js:13508)
    at Object.debugHandleEvent [as handleEvent] (core.es5.js:13096)
    at dispatchEvent (core.es5.js:8659)
    at core.es5.js:9270
    at HTMLAnchorElement.<anonymous> (platform-browser.es5.js:2668)
    at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:424)
    at Object.onInvokeTask (core.es5.js:3924)
    at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:423)

我看过plunker示例,但是当我实现它们时,它似乎打破了我的应用程序.我将组件和依赖项添加到app.module.

建议吗？

Answer 1

如果您尝试显示模态框，您可以直接在 Angular 中使用 Bootstrap。像这样

npm 安装引导程序 --save

在 Angular-cli.json 中

  "styles": [
    "styles.css",
    "../node_modules/bootstrap/dist/css/bootstrap.min.css"
  ],
  "scripts": ["../node_modules/jquery/dist/jquery.js",
    "../node_modules/bootstrap/dist/js/bootstrap.min.js"
  ],

在组件中

import { Component } from '@angular/core';

declare var $ :any;

@Component({

有关如何导入第三方库的更多信息LINK

工作模式-LINK。

如果您想检查工作模式LINK的源代码。