Angular 2使用Wrapper扩展NPM组件Ngx-Modal

时间:2017-06-22 11:40:28

标签: angular inheritance wrapper ngx-modal

我尝试在Angular 2中本地扩展现有的工作组件。我没有得到任何真正有用的指示,问题是什么,没有错误等。

所以我修改了一个现有的plunker(https://plnkr.co/edit/8x34JbEhYdVms4iYLRvM?p=preview),它有一个ngx-modal工作的例子。

(我正在努力使这项技术正确,所以它的ngx-modal并不重要,它恰好是我找到一个好的傻瓜。)

  

我添加了一个扩展另一个组件的新组件。
  的 NGX-modal.component.ts

//Extend and wrap NGX MODAL
import { Component } from '@angular/core';
import { ModalModule } from "ngx-modal";

@Component({
    selector: 'ext-ngx-modal', 
    template: `<ng-content></ng-content>`,
})
export class NgxModalComponent extends ModalModule {
    constructor() {
        super();
    }
}
  

我用现有的模态包裹了   的 app.ts

<ext-ngx-modal>
   <modal #myModal>
        <modal-header>
             <h1>Modal header</h1>
        </modal-header>
        <modal-content>
             Hello Modal!
        </modal-content>
        <modal-footer>
           <button class="btn btn-primary"(click)="myModal.close()">close</button>
       </modal-footer>
    </modal>

  

并注册了组件:

import {Component, NgModule} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'
import {ModalModule} from "ngx-modal";
import {NgxModalComponent} from "ngx-modal.component"

@Component({

等...

@NgModule({
  imports: [ BrowserModule,ModalModule ],
  declarations: [ App, NgxModalComponent ],
  exports: [ NgxModalComponent ],
  bootstrap: [ App ]
})
  

在此之后,追赶者不会跑......!

My extended Plunker-not working

1 个答案:

答案 0 :(得分:1)

1. Modal / ModalModule

您的NgxModalComponent应导入并扩展Modal,而不是ModalModule

export class NgxModalComponent extends Modal {

2.模板语法错误

您忘了关闭<ext-ngx-modal>中的App template标记,应该是: </ext-ngx-modal>

3. Plunker

我不知道如何正确引用plunker中的导入文件,因此我将您的组件移动到一个文件中......

这是一个有效的PLUNKER