Change value of a variable of another Angular component

Question

Change value of a variable of another Angular component

Navigation

#1 by (0 votes)
#2 by (0 votes)

-1

Hello, I have a component that is called errorLog, inside it has a method called LogOut, which is called when I click on 1 button of logOut, however after you have removed it and redirected to the login page, however I wanted to display a text in this login screen that is only displayed after being logged off, then in my templateHTML of my login component I created this following code:

<div *ngIf="deslogado" class="alert alert-warning">
          <span>Você foi deslogado</span>
</div>

Then only this div will appear when the 'unlogged' variable is TRUE, so how do I say in my component that the 'unsubscribe' variable of the component login is true? when to be redirected * ngIf give true?

javascript html typescript angular

asked by anonymous 05.10.2018 / 21:15

2 answers

Specific lines of a table Javascript: when it is midnight add +1 on the date

score 0 · Answer 1

To share variables between components, Angular recommends using services.

Service are singletons, that is, only one instance exists during the application lifecycle and should be used to maintain information state between components.

A classic example of using services is just keeping the user information logged in.

@Injectable()
export class AccountService {
  account?: Account

  login(): void {
    account = { id: 1111, name: 'Marcelo' }
  }

  isLoggedIn(): boolean {
    return !!account
  }

  loggout(): void {
    account = undefined
  }
}

In the above service we use the member of class account to store the information of the logged in user.

The login method should execute its login process and store the result in the variable account.

The isLoggedIn method validates the information of the variable account and returns true if it has been filled, ie the user is logged in.

The loggout method only sets the variable account to undefined or removes the information of the logged in user.

After defining the service, you need to inject it into your component to display the information, so as I understand, do the following

@Component({
  selector: 'page-login'
  ...
})
export class PaginaLoginComponent {

  constructor(
    private accountService: AccountService
  ) { }

  isLoggedIn() {
    return this.accountService.isLoggedIn()
  }

}

and in the component template PaginaLoginComponent

<div *ngIf="isLoggedIn()" class="alert alert-warning">
  <span>Você foi deslogado</span>
</div>

Ready, I hope to have helped, please remember to share information regarding the overall state of the application we use Angular services.

[] s

score 0 · Answer 2

You can also pass a flag in the url

import { ActivatedRoute } from '@angular/core';

@Component(...)
export class SeuComponent {
    public justLogout = false;

    constructor(
        private route: ActivatedRoute
    ) {
        this.route.queryParams.subscribe(
            (params: any) => {
                if (params['logout'] === 'true') {
                    this.justLogout = true;
                }
            }
        );
    }
}

In your template

<div *ngIf="justLogout" class="alert alert-warning">
    <span>Você foi deslogado</span>
</div>

That's where to redirect as well

http://sua-url/login?logout=true

Or in the template using the routerLink

<a routerLink="/login" [queryParams]="{logout: true}">link</a>

or by imperative navigation

import { Router } from '@angular/core';

constructor(
        private route: ActivatedRoute
    ) {}

goToLogin() {
    this.route.navigate(['/login'], {queryParams: {'logout': 'true'}});

}

Reference:

link