Jquery 错误-如何基于身份验证在Angular 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)

应用程序组件html文件

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

我认为您可以直接搜索id为“LoggedIn”或“LoggedOut”的元素，但正如Jonathan Niu所说，ngIf将完全从DOM中删除它们，这样您就可以将id向上移动到父级

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



应用你的动画
我认为你可以直接搜索id为'LoggedIn'或'LoggedOut'的元素，但正如Jonathan Niu所说，ngIf将从DOM中完全消除它们，这样你就可以将id向上移动到父级

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



并应用动画
ngIf在false时根本不会在页面上渲染组件，因此jquery将无法找到它。ngIf在false时根本不会在页面上渲染组件，因此jquery将无法找到它。