Как я могу загрузить html на основе экземпляра компонента - PullRequest
Новая
       10

Как я могу загрузить html на основе экземпляра компонента

0 голосов
/ 28 января 2020

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

parent.component. html

<div *ngIf='ifExist'>
  <button value="Validate" (click)="validate($event)">Validate</button>
</div>

<div *ngIf='!ifExist'>
   <app-child></app-child>
</div>

parent.component.ts 

 ifExist : boolean = true;

  constructor() { }

  ngAfterViewInit(){

    this.ifExist = this.checkChild();  // this function is in subscribe

  }
  checkChild() : boolean{
    if(ChildComponent.childInstance){
      return true;
    }
    else {
      return false;
    }
  }
  validateAddress(){
    $('childButton').trigger('click');
  }

child.component. html

<button if="childButton" value="Validate" (click)="validateAddress($event)">Validate</button>

<div class="modal fade" if="display">
   // modal popup code in bootstrap
</div>

child.component.ts 

static childInstance : ChildComponent;
  constructor() {
     ChildComponent.childInstance = this; 
   }
  ngOnInit() {
  }
  validateAddress(ev){
    $('#display').show();
  }

Я пишу это потому, что та же кнопка присутствует и в другом компоненте.

Приведенный выше код работает нормально в chrome, и значение из функции в родительском компоненте возвращает false. но в IE11 всплывающее окно не отображается, когда я нажимаю на эту кнопку, и страница застряла.

Я пробовал несколько способов изменить значение ifExist на false. теперь он работает нормально в IE11 и не работает в chrome.

Я попытался поместить console.log в родительский конструктор, и значение печатается 3 раза в IE11 и только один раз в chrome когда ifExist имеет значение true и если я изменяю ifExist на false, то происходит наоборот. Я уверен, что не использую родительский селектор ни разу. я создаю 2 экземпляра в конструкторе родительского компонента, как показано ниже 

static parentCompInstance1 : parentComponent;
static parentCompInstance2 : parentComponent;
constructor(){
parentCompInstance1 = this;
parentCompInstance2 = this;
}

является ли приведенный выше код причиной загрузки компонента трижды? Я не знаю, является ли это IE проблемой или я что-то упускаю. не могли бы вы помочь мне избавиться от этого. Заранее спасибо.

...