Angular2 - ngIf riert die untergeordnete Komponente nicht

Question

Ich habe eine Login-Komponente, die von mehreren Orten aufgerufen wird und eine Eingabe hat, um es als modale oder einfach nur Komponente anzuzeigen.

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'); 
     } 
    } 
} 

Mein Login/index.html Vorlage eine einfache Bootstrap-modal enthält.

Meine Stammkomponente:

@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; 
     } 
    } 
} 

ich meine Eltern die Anmeldungskomponente in der Komponente wie platziert haben:

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

und haben einen Knopf, der die submitBid Funktion aufruft und aktualisiert die Flagge

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

Ich aktualisiere 'showLoginModal' basierend auf, ob der Benutzer authentifiziert ist oder n ot und have * ngIf, um die LoginComponent mit modaler Option neu zu rendern. Ich erwarte, dass der eckige die update neu berechnet, wenn * ngIf aktualisiert wird und das modale wieder öffnet, aber es tut es nicht. Es funktioniert nur einmal (auch wenn ich showLoginModal auf false zurücksetze, bevor ich es auf true setze).

Answer 1

cdRef:ChangeDetectorRef

constructor(private cdRef:ChangeDetectorRef) {} 

und setzen showLoginModal-false Spritzen und dann mit Aufruf Änderungserkennung in bis true zwischen wie

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

Auf diese Weise ngIf wird auch wieder machen, wenn showLoginModal war true vor dem submitBid() Methode wurde aufgerufen.