Question

我是angular2最终版本的新手，并没有找到任何有关角度2的弹出窗口的帮助，我在我的解决方案中使用它时看到Link我得到以下错误

Cannot set property 'popover' of undefined
    at Popover.show (Popover.ts:134)
    at Popover.toggle (Popover.ts:98)
    at Popover.showOrHideOnClick (Popover.ts:64)
    at DebugAppView._View_PatientSearch0._handle_click_308_0 (PatientSearch.ngfactory.js:2659)
    at eval (core.umd.js:9698)
    at eval (platform-browser.umd.js:1877)
    at eval (platform-browser.umd.js:1990)
    at ZoneDelegate.invoke (zone.js:203)
    at Object.onInvoke (core.umd.js:6242)
    at ZoneDelegate.invoke (zone.js:202)

我已经按照所有步骤进行了操作，并将所有文件包含在node_modules中，但没有运气。互联网没有足够的帮助。因为我的生活帮助了我，我做错了什么，我还需要做些什么

import {PopoverModule} from '../node_modules/ng2-popover/src/index';
@NgModule({
    imports: [

        PopoverModule
}

模板

<button [popover]="myPopover">element on which this popover is applied</button>

<popover-content #myPopover
                                                 title="Popover title"
                                                 placement="left"
                                                 [animation]="true"
                                                 [closeOnClickOutside]="true">
                                    <b>Very</b> <span style="color: #C21F39">Dynamic</span> <span style="color: #00b3ee">Reusable</span>
                                    <b><i><span style="color: #ffc520">Popover With</span></i></b> <small>Html support</small>.
                                </popover-content>

Systemjs.config.js

var packages = {
    'app': { main: 'main.js', defaultExtension: 'js' },
    'rxjs': { defaultExtension: 'js' },
    'angular2-in-memory-web-api': { main: 'globals.js', defaultExtension: 'js' },
    "ng2-popover": { "main": "index.js", "defaultExtension": "js" }
};

Component.ts

import { Component, OnInit,NgModule } from '@angular/core';
import {PatientListServiceResponse} from '../../classes/common/patientmodel';
import {PatientListWebServices} from '../../services/common/patientlist';
import {Profile} from '../../classes/patient/profile/profile';
import { Http, RequestOptions} from '@angular/http';
import {AFUtills} from "../../generic/afutills";
import { Tab } from './../../classes/common/tabs';
import { Router} from '@angular/router';
import {PopoverModule} from 'ng2-popover';
import "rxjs/Rx";
@Component({
    selector: 'PatientSearch',
    templateUrl: '/Common/PatientSearch/',
    providers: [PatientListWebServices, AFUtills],

})
@NgModule({
    imports: [
        PopoverModule
            ]
    })

Answer 1

安装npm模块：

npm install ng2-popover --save

这会将所有文件提供给node_modules文件夹。您不必从github repo复制任何文件。

命令成功运行后，将以下内容添加到systemjs.config.js中的map和package配置中 -

{
    "map": {
        "ng2-popover": "node_modules/ng2-popover"
    },
    "packages": {
        "ng2-popover": { "main": "index.js", "defaultExtension": "js" }
    }
}

然后像这样导入PopoverModule -

import {PopoverModule} from "ng2-popover";

而不是

import {PopoverModule} from '../node_modules/ng2-popover/src/index';

在组件模板html中，您可以像这样使用它 -

  <div>
    <popover-content #myPopover title="this header can be omitted" placement="right" [closeOnClickOutside]="true">
      <b>Very</b> <span style="color: #C21F39">Dynamic</span> <span style="color: #00b3ee">Reusable</span>
      <b><i><span style="color: #ffc520">Popover With</span></i></b> <small>Html support</small>. Click outside of this popover and it will be dismissed automatically.

      <u (click)="myPopover.hide()">Or click here to close it</u>.
    </popover-content>

    <button [popover]="myPopover">click this button to see a popover</button>
  </div>

看看这是否有帮助。

无法设置undefined的属性'popover'

1 个答案: