Angular 2 Расширение NPM-компонента Ngx-Modal с помощью Wrapper

Question

Я пытаюсь расширить существующий рабочий компонент локально в Angular 2. Я не получаю действительно полезного указания, в чем проблема, никаких ошибок и т. Д.

Поэтому я изменил существующий плункер ( https://plnkr.co/edit/8x34JbEhYdVms4iYLRvM?p=preview), в котором есть пример работы ngx-modal.

(Я пытаюсь сделать эту технику правильной, поэтому не имеет значения, что это ngx-модал, просто так получилось, что я нашел хороший поршень).

Я добавил новый компонент, который расширяет другие...
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 ]
})

После этого поршень не побежит...!

Мой расширенный плункер - не работает

Answer 1

1. Модал / МодалМодуль

Ваш NgxModalComponent следует импортировать и распространять Modalне ModalModule:

export class NgxModalComponent extends Modal {

2. Ошибка синтаксиса шаблона

Вы забыли закрыть <ext-ngx-modal> тег в вашем App template, должно быть:</ext-ngx-modal>

3. Плункер

Я не знаю, как правильно ссылаться на файлы при импорте в plunker, поэтому я переместил ваши компоненты в один файл...

Вот рабочий ПЛАНКЕР