Fehler - Wie man den Alarm in Angular 2 basierend auf der Authentifizierung dynamisch ein-/ausblendet

Question

Ich habe Probleme mit dem Ein-/Ausblenden des Alarmelements in wenigen Sekunden. Ich möchte, wenn ich nicht authentifiziert bin, in wenigen Sekunden Alarm-Gefahr verstecken, während ich authentifiziert bin, möchte ich dynamisch in wenigen Sekunden Alarm-Erfolg zeigen und Alarm-Gefahr verstecken.

Ist es möglich? Ich habe es mit jQuery gemacht und es funktioniert auf eine Art und gibt mir einen Fehler.

Fehler, die in der Konsole angezeigt, wenn Alarm verschwindet ist:

TypeError: Cannot read property 'nativeElement' of undefined 
    at HTMLDivElement.<anonymous> (app.component.ts:19) 
    at HTMLDivElement.e.complete (jquery.min.js:3) 
    at i (jquery.min.js:2) 
    at Object.fireWith [as resolveWith] (jquery.min.js:2) 
    at i (jquery.min.js:3) 
    at Function.r.fx.tick (jquery.min.js:3) 
    at bb (jquery.min.js:3) 
    at ZoneDelegate.invokeTask (zone.js:265) 
    at Object.onInvokeTask (ng_zone.js:227) 
    at ZoneDelegate.invokeTask (zone.js:264) 

App Komponente ts Datei

import { Component, ElementRef, AfterViewInit } from '@angular/core'; 
import { Auth } from './auth.service'; 

declare var jQuery: any; 

@Component({ 
    selector: 'app-root', 
    templateUrl: './app.component.html' 
}) 
export class AppComponent implements AfterViewInit { 


    constructor(private auth: Auth, 
       private elementRef: ElementRef) {} 

    ngAfterViewInit() { 
    if (!this.auth.authenticated()) { 
    jQuery(this.elementRef.nativeElement).find('#loggedOut').fadeTo(3000, 1000).slideUp(1000, function(){ 
    jQuery(this.elementRef.nativeElement).find('#loggedOut').slideUp(1000); 
     }); 
    } else if (this.auth.authenticated()) { 
    jQuery(this.elementRef.nativeElement).find('#loggedIn').fadeTo(3000, 1000).slideUp(1000, function(){ 
    jQuery(this.elementRef.nativeElement).find('#loggedIn').slideUp(1000); 
     }); 
    } 
    } 

} 

App Komponente HTML-Datei

<app-header></app-header> 
<div class="container"> 
    <div class="alert alert-success alert-dismissable" id="loggedIn" *ngIf="auth.authenticated()">You are logged in</div> 
<div class="alert alert-danger alert-dismissable" id="loggedOut" *ngIf="!auth.authenticated()">You are not logged in</div> 
    <router-outlet></router-outlet> 
</div> 

This is app.component.html

This is app.component.ts

Answer 1

Ich glaube, Sie direkt zum Element mit id ‚LoggedIn‘ oder ‚LoggedOut‘ suchen, aber wie Jonathan Niu sagte ngIf wird sie vollständig von DOM beseitigen, so dass Sie Ihre ID bis zu Eltern bewegen kann

<div class="container" id="LoggedIn"> 

und wenden sie Ihre Animation