angular – Ng-bootstrap不渲染

发布时间：2020-12-17 17:36:30 所属栏目：安全来源：网络整理

导读：我试图像这样呈现一个模态： 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(),EditP

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

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.

建议吗？

解决方法

如果您尝试显示模态,可以直接在Angular中使用Bootstrap.
像那样

npm install bootstrap –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({

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

工作模式 – LINK.

如果你想检查工作模式LINK的源代码.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!