Change the value of a variable through another component [ANGULAR 2]

Asked

Viewed 4,281 times

0

I have a boolean variable declared inside a window component, this variable serves to print/hide a link that is in the header.

I want to,change the value of that variable from a second component, in the case component close.

window.componentts.

itensVisiveis: boolean = false;

setExibeComponentes(val: boolean) {
  this.itensVisiveis = val;
}

window.component.html

<a routerLink="/fechar">
  <span
    class="glyphicon glyphicon-remove" 
    [ngClass]="{ 
      'hidden': !itensVisiveis 
    }"
    aria-hidden="true"></span>
</a>

<router-outlet></router-outlet> //imprimi os componentes como fechar, etc

close.componentts.

window: WindowComponent = new WindowComponent;

retoma() {
  this.window.setExibeComponentes(true);
}

close.component.html

<a routerLink="/atendimento" (click)="retoma()">
  Voltar ao atendimento
</a>
angular angular-routes

2 answers

0


The solution adopted was as follows: I had to create a service to suit my two components, in that service I used the emission of events (Eventemitter).

window.service.ts

import { Injectable, EventEmitter } from "@angular/core";
@Injectable()
export class ChatWindowService {

  eventItensVisiveis = new EventEmitter<any>();
  private itensVisiveis: boolean = false;

  constructor() {
  }
  getItensVisiveis() {
    return this.itensVisiveis;
  }
  setItensVisiveis(val: boolean) {
    this.itensVisiveis = val;
    this.eventItensVisiveis.emit(val);
  }
}

window.componentts.

import { Component, EventEmitter } from "@angular/core";
import { WindowService } from "./window.service";
import { Router, ActivatedRoute } from "@angular/router";

@Component({
  selector: 'chat-window',
  templateUrl: './window.component.html',
  styleUrls: ['./window.component.sass']
})
export class WindowComponent {

  itensVisiveis: boolean = false;

  constructor(
      private route: ActivatedRoute,
      private windowService: WindowService
    ) {
  }

  ngOnInit() {
    this.windowService.eventItensVisiveis.subscribe(
      event => this.setItensVisiveis(event)
    );
  }

  setItensVisiveis(visibilidade: boolean) {
    this.itensVisiveis = visibilidade;
  }
}

close.component.ts //old close.component.ts

import { 
  Component,
  OnInit,
  Output,
  EventEmitter,
  Injectable
} from '@angular/core';
import { Router } from "@angular/router";

import { WindowService } from "../window.service";

@Component({
  selector: 'app-close',
  templateUrl: './close.component.html',
  styleUrls: ['./close.component.sass']
})
@Injectable() export class CloseComponent implements OnInit {

  constructor(
      private router: Router,
      private windowService: windowService
    ) {

  }

  ngOnInit() {
  }

  retoma() {
    this.windowService.setItensVisiveis(true);
    this.redirect('main'); //redireciona para outra página
  }

  redirect(route: string) {
    route = './' + route;
    this.router.navigate([route]);
  }

}

close.component.ts //old close.component.ts

<a routerLink="/atendimento" (click)="retoma()">
  Voltar ao atendimento
</a>

-1

Browser other questions tagged angular angular-routes

You are not signed in. Login or sign up in order to post.