时间戳

首页 > 解决方案 > 角度激活事件不会在两个模块之间触发

angular - 角度激活事件不会在两个模块之间触发

问题描述

你好在我的角度应用程序中。我生成了两个模块，其中一个是 AdminModule，另一个是 HomeModule。在 AdminModule 我有一个组件是 Login 组件，在 ts 中的代码如下

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { DataService } from '../../../../core/services/DataService';
import { SessionService } from '../../../../core/services/sessionService';
import { URLS } from '../../../../shared/models/URLS';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.scss']
})
export class LoginComponent implements OnInit {

  constructor(private dataService: DataService, private router: Router, private session: SessionService) {
    var x = this.session.GetFromStorage("panel_admin");
    if (x && x.id > 0) {
      this.session.SetToStorage(x, "panel_admin");
      this.router.navigateByUrl("/home");
    }
  }

  ngOnInit(): void {

  }
  username: string = "";
  pass: string = "";

  login() {
    if (this.username == "" || this.pass == "") { alert("Lütfen Kullanıcı Adı ve Şifresiniz giriniz"); return; }
    var item = { Username: this.username, Password: this.pass };
    this.dataService.Post(URLS.url.loginPage.login, item).subscribe(x => {
      if (x.data && x.data.id > 0) {
        this.session.SetToStorage(x.data, "panel_admin");
        this.router.navigateByUrl("/home");
      }
    })
  }

}

在这里，我正在导航到 Home Module 内的 Home 组件。现在的问题是下面的代码是 appcomponent.html 并且在激活事件中的这个 html 中我会检测到变化

<sa-header personel="personel" *ngIf="!isLogged"></sa-header>
<sa-left-panel personel="personel" *ngIf="!isLogged" class="panelMenu"></sa-left-panel>
<div class="main" >
    <router-outlet (activate)="showHide($event)"></router-outlet>
</div>

然后我在 appcomponent.ts 中显示和隐藏左面板和标题

import { Component } from '@angular/core';
import { Router } from '@angular/router';
import { SessionService } from './core/services/sessionService';
import { LoginComponent } from './modules/admin/pages/login/login.component';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = 'Sinav Alemi Panel Web';
  isLogged:boolean=false;
  personel:any;
  constructor(private session:SessionService,private router:Router) { 
    this.isLogged=Event instanceof LoginComponent ;
  }

  showHide(event){
    console.log("entered");
     this.isLogged=event instanceof LoginComponent ;
     if(!this.isLogged){
       this.personel=this.session.GetFromStorage("panel_admin");
     }
  } 
}

但是当我到达主页时，showHide 事件没有被触发。我该如何解决这个问题？

提前致谢

标签： angular

解决方案

您可以做的是创建如下所示的服务

@Injectable
export class UserService {
  isLoggedIn$ : Observables<boolean>;
  private isLoggedIn : BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);

  constructor() {
    this.isLoggedIn$ = this.isLoggedIn.asObservable();
  }

  updateLoggedInStatus(value: boolean) {
    this.isLoggedIn.next(value);
  } 
}

然后在你的 AppComponent

export class AppComponent {
  title = 'Sinav Alemi Panel Web';
  isLogged:boolean=false;
  personel:any;
  constructor(private session:SessionService,
              private router:Router, 
              private userService: UserService) { 
    this.userService.isLoggedIn$.subscibe(value => {
       this.isLogged = value;
       if(!this.isLogged){
           this.personel=this.session.GetFromStorage("panel_admin");
        }
    })
  }
}

并在 LoginComponent

  constructor(
        private dataService: DataService, 
        private router: Router, 
        private session: SessionService,
        private userService: UserService
  ) {

  // rest of your codes

 login() {
    if (this.username == "" || this.pass == "") { alert("Lütfen Kullanıcı Adı ve Şifresiniz giriniz"); return; }
    var item = { Username: this.username, Password: this.pass };
    this.dataService.Post(URLS.url.loginPage.login, item).subscribe(x => {
      if (x.data && x.data.id > 0) {
        this.session.SetToStorage(x.data, "panel_admin");
        this.userService.updateLoggedInStatus(true);
        this.router.navigateByUrl("/home");
      }
    })
  }

推荐阅读