오류 - 인증을 기준으로 각도 2로 경고 표시/숨기기를 동적으로 지정하는 방법

Question

몇 초 내에 경고 요소 표시/숨기기에 문제가 있습니다. 인증되지 않은 상태에서 몇 초 안에 경고 위험에 숨기고 싶습니다. 인증을받는 동안 몇 초 내에 경고 성공을 동적으로 표시하고 경고 위험을 숨기고 싶습니다.

가능합니까? jQuery로 만들었고 한 가지 방법으로 작동하고 오류가 발생했습니다. 경고가 사라지면 콘솔에 표시

오류는 다음과 같습니다

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) 

응용 프로그램 구성 요소 TS는 파일

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

} 

응용 프로그램 구성 요소 html 파일

<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.ts

Answer 1

내가 직접 ID 'LoggedIn'또는 'LoggedOut'와 요소를 검색 할 수 있다고 생각하지만, 조나단 니우 당신이 부모

에 ID를 이동할 수 ngIf 완전히 DOM에서 그들을 제거하는 것이라고 말했다

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

과 거짓의 모든 페이지의 구성 요소를 렌더링하지 않습니다 애니메이션