エラー - 認証に基づいて角2でアラートを表示/非表示にする方法

アラート要素の表示/非表示に問題があります。私は認証されていないときに数秒間アラート危険に隠れるようにしたい、認証されている間、私は数秒でアラート成功をダイナミックに示し、アラート危険を隠したい。エラー - 認証に基づいて角2でアラートを表示/非表示にする方法

可能ですか？私は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.html

This is app.component.ts

出典

2017-01-26 Vladimir Svičević

ngIf適用するので、あなたのjqueryのは、それを見つけることができません。 –