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

This is app.component.ts

Answer 1

我认为您可以直接搜索带有ID＆＃39; LoggedIn＆＃39;或者＆＃39; LoggedOut＆＃39;，但正如Jonathan Niu所说，ngIf将完全从DOM中删除它们，这样你就可以将你的id移到父母身上了

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

并应用你的动画

错误 - 如何根据身份验证动态显示/隐藏Angular 2中的警报

1 个答案: