Angular2 - ngIf не перерисовывает дочерний компонент

Question

У меня есть компонент входа, который вызывается из нескольких мест и имеет вход для отображения его как модального или простого компонента.

LoginComponent:

declare var jQuery: any; 
@Component({ 
    selector: 'login-view', 
    templateUrl: '/login/index.html', 
    inputs: ['isOpenLoginModal'] 
}) 
export class LoginComponent extends BaseConfigurations { 
    public isOpenLoginModal: boolean; 

    //this method is called from ngOnInit in base class 
    public initialize() { 
     this.showModal(); 
    } 

    constructor() { 
     super(); 
    } 

    private showModal(): void { 
     if (this.isOpenLoginModal) { 
      jQuery("#loginComponentModal").modal('show'); 
     } 
    } 
} 

Мой шаблон Логин/index.html содержит простую самозагрузку модальность.

Мой родительский компонент:

@Component({ 
    selector: 'upcoming-auction-view', 
    templateUrl: '/auctions/upcoming-auctions.html' 
}) 
export class UpcomingAuctionsComponent extends BaseConfigurations { 
    private showLoginModal: boolean = false; 

    public initialize() { 
     this.showLoginModal = false; 
    } 

    constructor() { 
     super(); 
    } 

    submitBid(): void { 
     if (!this.isAuthenticated) { 
      //if user is not authenticated, show login component 
      this.showLoginModal = true; 
     } 
    } 
} 

Я разместил свой логин компонент в компоненте моего родителя, как:

<login-view *ngIf="showLoginModal === true" [isOpenLoginModal]="true"></login-view> 

и есть кнопка, которая вызывает функцию submitBid и обновляет флаг

<input type="submit" class="form-submit primary-btn" value="Place Bid" (click)="submitBid()" /> 

Я обновляю 'showLoginModal' на основе аутентификации пользователя или n ot и иметь * ngЕсли повторно включить LoginComponent с модальной опцией. Я ожидаю, что угловой перерисовать, когда * ngIf будет обновлен и снова откроется модальный, но это не так. Он работает только один раз (даже если я сбросил showLoginModal на false, прежде чем устанавливать его в true).

Answer 1

Инъекционное cdRef:ChangeDetectorRef

constructor(private cdRef:ChangeDetectorRef) {} 

и установить showLoginModal к false, а затем true с вызовом определения изменения между как

this.showLoginModal = false; 
this.cdRef.detectChanges(); 
this.showLoginModal = true; 

Таким образом ngIf будет повторно вынести даже когда showLoginModal был true до submitBid() метод был вызван.