Angularjs   发布时间:2022-04-20  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了angular – Ng-bootstrap不渲染大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
我试图像这样呈现一个模态:

HTML

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

模块:

imports: [BrowserModule,httpR_554_11845@odule,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.

建议吗?

解决方法

@H_502_54@ 如果您尝试显示模态,可以直接在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的源代码.

大佬总结

以上是大佬教程为你收集整理的angular – Ng-bootstrap不渲染全部内容,希望文章能够帮你解决angular – Ng-bootstrap不渲染所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。