Angular2注入的组件html模板未重置

Question

当用户点击某个按钮时，会弹出一个模态，并将一个组件注入模态。对于每个组件注入，是注入组件的新实例吗？如果是这样，有人知道为什么如果我再次点击按钮并且组件的另一个实例弹出到模态中，注入组件的修改后的HTML不会被重置？

模态

@Component({
  selector: 'customize-modal-component',
  styleUrls: ['./modal.component.scss'],
  templateUrl: './modal.component.html'
})

export class CustomizeModalComponent {
    private injectedComponet;

    showChildModal() {
        this.childModal.show();
    }

    injectComponent(component) {
        let componentFactory = this.componentFactoryResolver.resolveComponentFactory(component);
        this.injectedComponent = this.viewContainerRef.createComponent(componentFactory);
    }

    hideChildModal() {
        if(this.injectedComponent) this.injectedComponent.destroy();
        this.childModal.hide();
    }
}

将注入的组件转换为模态

@Component({
  selector: 'injected-component',
  template: '<div *ngIf="!validated">Successfully Validated {{validationId}}</div>'
})

export class InjectedComponent implements OnInit, OnDestroy {
    private validationId;
    private validated = false;

    modifyVariables(){
        validated = true
        validationId = 'ABYLO123';
    }
}

父组件

import { ComponentToBeInjected } from '../../component-injected.ts';

@Component({
  selector: 'parent-component',
  templateUrl: './parent-component.html'
})

export class ParentComponent implements OnInit, OnDestroy {

    activateModal(){
        this.modal.injectComponent(ComponentToBeInjected);
        this.modal.showChildModal();
    }

}