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 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"
  ],

IN COMPONENT

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

declare var $ :any;

@Component({

有关如何导入第三方库LINK

的详细信息

工作模式 - LINK。

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

Answer 2

Working Plunker Link：http://plnkr.co/edit/vTY9gG9QcL25Wm9NTBqS?p=preview

1）在你的app.module.ts中，看起来像你没有声明EditProfileComponent 。而不是导入，将EditProfileComponent放在声明中。请参阅以下代码：

@NgModule({
  imports: [BrowserModule,HttpModule,
RouterModule.forRoot(appRoutes), NgbModule.forRoot()], 
  declarations: [App, EditProfileComponent]
  bootstrap: [App]
})

2）你的组件看起来不错：

    import {Component} from '@angular/core';
    import {NgbModal, ModalDismissReasons} from '@ng-bootstrap/ng-bootstrap';

    @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}`;
        }
      }
    }

3）在您的HTML edit-profile.html中，您似乎缺少将被称为显示模式的ng-template。

如果您发现，我们会通过内容＆＃39;当我们点击＆＃39; a＆＃39;标签。这个＆＃39;内容＆＃39;是html中模板的本地引用。我们使用实例＆＃39; this.modalService＆＃39; ＆＃39; NgbModal＆＃39;打开我们组件中的特定模态。

<ng-template #content let-c="close" let-d="dismiss">
  <div class="modal-header">
    <h4 class="modal-title">Modal title</h4>
    <button type="button" class="close" aria-label="Close" (click)="d('Cross click')">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="modal-body">
    <p>One fine body&hellip;</p>
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-secondary" (click)="c('Close click')">Close</button>
  </div>
</ng-template>


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

Ng-bootstrap不呈现

2 个答案: