Question

我正在使用角度来制作网络应用。无论何时我点击登录或注销功能，我都会收到此错误

LoginComponent.html:9 ERROR Error: ViewDestroyedError: Attempt to use a destroyed view: detectChanges
at viewDestroyedError (core.js:9783)
at Object.debugUpdateDirectives [as updateDirectives] (core.js:14635)
at checkAndUpdateView (core.js:13785)
at callWithDebugContext (core.js:15039)
at Object.debugCheckAndUpdateView [as checkAndUpdateView] (core.js:14576)
at ViewRef_.detectChanges (core.js:11560)
at eval (flash-messages.component.js:39)
at ZoneDelegate.invokeTask (zone.js:421)
at Object.onInvokeTask (core.js:4724)
at ZoneDelegate.invokeTask (zone.js:420)

由于这个原因，我的CSS受到影响，整个页面看起来都被打乱了。

我尝试了堆叠溢出时给出的所有答案来克服这个问题，但没有任何事情可以帮助我。

以下是其中一个ts文件的代码

 import { Component, OnInit ,OnDestroy 
,ChangeDetectorRef,ChangeDetectionStrategy} from '@angular/core';
import { UserLogs } from '../../model/UserLog';
import { AuthService } from '../../services/auth.service';
import { FlashMessagesService } from 'angular2-flash-messages';
import { Router } from '@angular/router';
import { ViewEncapsulation } from '@angular/core';
import { Observer } from '@firebase/util';
import { ISubscription } from 'rxjs/Subscription';
@Component({
  encapsulation: ViewEncapsulation.None,
  changeDetection: ChangeDetectionStrategy.OnPush,
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit ,OnDestroy {
  user:UserLogs;
  private subscription: ISubscription;
  constructor(private authService :AuthService,
   private router:Router,
    private flashMsg : FlashMessagesService,private changeDetectorRef:ChangeDetectorRef
  ) { }

  ngOnInit() {
    this.user={ntid:"",password:""};
    this.subscription= this.authService.getAuth().subscribe(auth =>{
      console.log(this.authService.who);

      if(auth)
      {
        console.log('logged in '+localStorage.getItem("token"));

        if(localStorage.getItem("token")=="user")
        {
          this.router.navigate(['/chat']);
        }
        else if(localStorage.getItem("token")=="consultant"){
          this.router.navigate(['/consultant']);
        }
      }
      else{
        console.log('Logged out');
        this.router.navigate(['/']);
      }
      if (!this.changeDetectorRef['destroyed']) {
        this.changeDetectorRef.detectChanges();
    }
    })
  }

  onSubmit({value,valid}:{value:UserLogs,valid:boolean}){
    localStorage.setItem("token", "user");
    this.authService.login(value.ntid+'@gmail.com',value.password,"user")
    .then(res =>{

      this.flashMsg.show('You are now logged in',
        {cssClass:'alert-success',timeout : 4000});

        this.router.navigate(['/chat']);
      }).catch(err =>{
        this.flashMsg.show(err.message,
        {cssClass:'alert-danger',timeout : 4000});
      })

  }
  onSubmit1({value,valid}:{value:UserLogs,valid:boolean}){
    localStorage.setItem("token", "consultant");
    this.authService.login(value.ntid+'@gmail.com',value.password,"consultant")
    .then(res =>{

      this.flashMsg.show('You are now logged in',
        {cssClass:'alert-success',timeout : 4000});

        this.router.navigate(['/consultant']);
      }).catch(err =>{
        this.flashMsg.show(err.message,
        {cssClass:'alert-danger',timeout : 4000});
      })

  }
  ngOnDestroy() {
    this.changeDetectorRef.detach();
    this.subscription.unsubscribe();
  }
}

我该怎么做才能解决这个问题？请帮助。

登出后我的登录页面css也会发生变化

注销后应该是这个

但这是退出后发生的事情

当我将鼠标悬停在登录表单上时，这会在注销后发生

这是logincomponent.html

<div class="row">
<div class="col-md-6 mx-auto">
  <flash-messages></flash-messages>
  <div class="card">
    <div class="card-body">
    <h1 class="text-center pb-4 pt-3" style="color:#406E8E">
      <span class="text-info"><i class="fa fa-lock"></i>User</span> Login</h1>
  <form #loginForm="ngForm" >
    <div class="form-group mb-4">
      <label for="ntID">Username</label>
      <input type="text"
        [(ngModel)]="user.ntid"
        name="ntid"
        [ngClass]="{'is-invalid':ntid.errors && ntid.touched}"
        #ntid="ngModel"
        required
        minlength="7"
       placeholder="NTID" class="form-control z-depth-5 " id="email">
       <div [hidden]="!ntid.errors?.required"
          class="invalid-feedback">Username required
        </div>
        <div [hidden]="!ntid.errors?.minlength"
          class="invalid-feedback">Must be atleast 7 characters
        </div>
  </div>
    <div class="form-group mb-4">
      <label for="password">Password</label>
        <input type="password" placeholder="Password" class="form-control z-depth-5 "
        [(ngModel)]="user.password"
        name="password"
        [ngClass]="{'is-invalid':password.errors && password.touched}"
        #password="ngModel"
        required>
        <div [hidden]="!password.errors?.required"
          class="invalid-feedback">Password is required
        </div>
      </div>
    <button class="btn btn-outline-info btn-lg btn-block mb-4" id="signInBtn" (click)="onSubmit(loginForm)"
     >Login as user</button>
    <button class="btn btn-outline-primary btn-lg btn-block mb-4" id="signInBtn1" (click)="onSubmit1(loginForm)">
      Login as consultant</button>
  </form>
  </div>
</div>

导致css更改的原因是什么？我没有添加任何在注销后出现的css

Answer 1

尝试更改为更正确的方式：

<form (ngSubmit)="onSubmit(loginForm)" #loginForm="ngForm">

...
<button type="submit" class="btn btn-outline-info btn-lg btn-block mb-4" 
        id="signInBtn">Login as user</button>
<button type="submit"  class="btn btn-outline-primary btn-lg btn-block mb- 
    4" id="signInBtn1">Login as consultant</button>

我认为，navigatuin在{cssClass:'alert-success'}完成之前就开始了。也许我错了：

// this.flashMsg.show('You are now logged in',
// {cssClass:'alert-success',timeout : 4000}); // comment this line of code

this.router.navigate(['/consultant']);

此外，无需从Http手动取消订阅请求观察。 SO answer：

ngOnDestroy() {
    this.changeDetectorRef.detach();
    // this.subscription.unsubscribe();
}

以角度

1 个答案: