2016-09-27 54 views
0

财产“酥料饼”我是新来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中的所有文件,但没有运气。没有足够的帮助,在我的生命internet.For帮我这个问题,我是做错了什么,我必须做更多的

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 
      ] 
    }) 
+0

没有人在这里回答?? :( – Kamran

+0

你可以请你分享你的systemjs.config.js和component.ts? – Sanket

+0

@Sanket我已经编辑了与systemjs.config.js和组件的答案,我也试过你的指令仍然是一样的错误持续 – Kamran

回答

0

安装NPM模块:

npm install ng2-popover --save 

这会给你的所有文件到node_modules文件夹。你不必从github仓库复制任何文件。

一旦命令成功运行,下面加入到地图和包装配置在systemjs.config.js-

{ 
    "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> 

看看这是否有帮助。