Угловые 2: как закрыть динамически загружаемые модальности с функцией внутри модального компонента сам по себе

Question

У меня есть модальный, который динамически созданный из компонента, таким образом:

@Injectable() 
export class SharedService { 
    showModal:Subject<any> = new Subject(); 
} 

@Component({ 
    selector: 'comp-comp', 
    template: `MyComponent dataToPass: {{dataToPass}}, dataToPass2: {{dataToPass2}} 
      <button (click)="doSomethingAndClose()">Do something and close</button>` 
}) 
export class CompComponent { 
    private dataToPass2; 

    constructor() {} 

    ngAfterContentInit() { 
    this.dataToPass2 = this.dataToPass + ' hello'; 
    } 

    doSomethingAndClose() { 
    this.dataToPass2 = this.dataToPass + ' I'm gonna close; 
    console.log(this.dataToPass2); 
    this.destroy(); 
    } 
} 

export class ModalComponent { 
    @ViewChild('theBody', {read: ViewContainerRef}) theBody; 

    theHeader: string = ''; 
    dataToPass: string = ''; 
    cmpRefBody:ComponentRef<any>; 

    constructor(
    sharedService:SharedService, 
    private componentFactoryResolver: ComponentFactoryResolver, 
    injector: Injector) { 

    sharedService.showModal.subscribe(data => { 
     if(this.cmpRef) { 
     this.cmpRef.destroy(); 
     } 
     let factory = this.componentFactoryResolver.resolveComponentFactory(data.type); 
     this.cmpRef = this.theBody.createComponent(factory); 
     this.cmpRef.instance.dataToPass = data.dataToPass; 
     this.dataToPass = data.dataToPass; 
     this.theHeader = data.title; 
     console.log(data.title); 
     console.log(data.dataToPass); 
     $('#theModal').modal('show'); 
    }); 
    } 

    close() { 
    if(this.cmpRef) { 
     this.cmpRef.destroy(); 
    } 
    this.cmpRef = null; 
    } 
} 

@Component({ 
    selector: 'my-app', 
    template: ` 
    <div> 
     <h2>Hello</h2> 
     <button (click)="showDialog()">show modal</button> 
     <child-component></child-component> 
    </div> 
    `, 
}) 
export class App { 

    constructor(private sharedService:SharedService) {} 

    showDialog() { 
    this.sharedService.showModal.next({'type': CompComponent, 'title': 'titolo1', 'dataToPass': 'dataToPass'}); 
    } 

} 

(ссылающийся: Angular 2 modals shared between components).

Внутри модального компонента есть функция close(), которая с this.CmpRef.destroy() закрывает сам модаль.

Как вы можете видеть here в моем плунге, я хотел бы сделать модальный компонент рядом с компонентом, динамически загруженным внутри модального. Я пытался сделать это с помощью функции doSomethingAndClose(), но это дает мне эту ошибку:

VM1882 core.umd.js:3472 EXCEPTION: Cannot set property stack of [object Object] which has only a getter 

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

Answer 1

Update

Он фиксируется в 0.7.6

https://github.com/angular/zone.js/blob/master/CHANGELOG.md#076-2017-01-17

Существует проблема в zone@0.7.5 версия. https://github.com/angular/zone.js/issues/595

Вы можете использовать 0.7.4 версию, чтобы решить эту проблему

npm install --save zone.js@0.7.4