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

Question

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

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

（我正在努力使这项技术正确，所以它是 ngx-modal 并不重要，它恰好是我发现的一个很好的 plunker。）

I added an new component that extends the other...
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();
    }
}

I wrapped the existing modal with
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>

and registered the component:

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

After this the plunker wont run...!

My extended Plunker-not working

Answer 1

1.模态/模态模块

您的 NgxModalComponent 应该导入和扩展 Modal，而不是 ModalModule:

export class NgxModalComponent extends Modal {

2.模板语法错误

您忘记关闭 App template 中的 <ext-ngx-modal> 标签，应该是： </ext-ngx-modal>

3. 笨蛋

我不知道如何在 plunker 中正确引用导入文件，所以我将您的组件移到了一个文件中...

这是一个有效的 PLUNKER

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

Angular 2 Extending an NPM component Ngx-Modal with Wrapper

inheritance

wrapper

ngx-modal

angular

1.模态/模态模块

2.模板语法错误

3. 笨蛋