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

Question

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

Navigation

#1 by (0 votes)

0

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

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

window.component.ts

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.component.ts

window: WindowComponent = new WindowComponent;

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

close.component.html

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

angular angular-routes

asked by anonymous 22.05.2017 / 19:10

1 answer

Return rows with the largest value in a [duplicate] column Get properties Css

score 0 · Accepted Answer

The solution adopted was the following: I had to create a service to service my two components, in that service I used the event sending (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.component.ts

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 cerrar.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 cerrar.component.ts

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