How to access a variable within ngAfterViewInit() in Angular

Asked

Viewed 159 times

0

I have looked here in the stack but I did not find the answer. Does anyone know if you can access a variable that is inside the ngAfterViewInit() in Angular.

In the code below, in the last line when I try to assign the variable motivo for motivoTitulo, ide informs me that "Unable to find the name 'reason'".

ngAfterViewInit() {
  const controlBlurs: Observable < any > [] = this.formInputElements
    .map((formControl: ElementRef) => Observable.fromEvent(formControl.nativeElement, 'blur'));

  const self = this;

  let motivo: string;

  this.swal.showSwalConfirmText(function(confirmacaoMotivo) {

    if (confirmacaoMotivo) {

      motivo = confirmacaoMotivo;
      self.removerTitulo();

    } else {
      self.cancelar();
    }
  });

}

motivoTitulo = motivo;

angular typescript

  • Why don’t you move that line into the afterviewinit?? In javascript and most languages will only exist within its scope for example a function

  • thanks @Eduardovargas .. is pq need to use this variable in another function within that same component. In the function I will use, I try to assign the variable but it comes as Undefined: let tituloHistorico = new TituloHistorico();&#xA;&#xA;&#xA; tituloHistorico.motivo = this.swal.motivoTitulo;

  • this.algumacoisa = things that are xistenafuncao;

  • 1

    No, but why don’t you declare the variable motive outside the ngAfterViewInit() if you want to use the value assigned to it outside viewInit?

  • @Eduardovargas tried with this.motivo = confirmacaoMotivo; outside ngAfterViewInit() but says "Unable to find the name 'confirmationMotive'"

  • @Leandrade then guy, I tried to assign with motivo = confirmacaoMotivo; outside of Ngafterviewinit() but says "Unable to find the name 'confirmationMotive'."

  • I will edit my reply and enter what your code should look like.

Show 2 more comments

2 answers

1


This issue independent of Typescript is what is called the scope being the basic of Javascript. You cannot access variables or their values declared outside the scope where they were created. Note that in the example below the variable fora can be accessed both inside and outside the function already the variable inside belongs to the scope of the function, can not be accessed "outside" of the same 

var fora;                                                           // <- VARIÁVEL GLOBAL

function Teste () {
  var dentro = 'RECEBE DENTRO E SÓ PODE SER UTILIZADA DENTRO !!';  // <- VARIÁVEL INTERNA
  fora = 'RECEBE DENTRO E ARMAZENA O VALOR FORA !!';
  
  console.log(dentro);
  console.log('02 -', fora);
}

Teste();

console.log('01 -', fora);
console.log(dentro);  //  <- ERRO POIS NÃO É VISIVEL FORA

With regard to your code:

public motivo: string;           // fora do ngAfterViewInit()

ngAfterViewInit() {
   const controlBlurs: Observable < any > [] = this.formInputElements
   .map((formControl: ElementRef) => 
      Observable.fromEvent(formControl.nativeElement, 'blur'));

   const self = this;

   this.swal.showSwalConfirmText(function(confirmacaoMotivo) {

     if (confirmacaoMotivo) {

        this.motivo = confirmacaoMotivo;         // <- atribui um valor aqui
        self.removerTitulo();

     } else {
        self.cancelar();
     }
   });

}

In this way this reason. is visible to any function within the class.

1

To simply solve your problem, you can do so:

    export class BlaComponent {
  public motivo: any;

  ngAfterViewInit() {
    const self = this;
    let motivo: string = 'blz';

    this.bla.x(this.fazAlgumaCoisa(motivo, self));
  }

  fazAlgumaCoisa(confirmacaoMotivo: any, self: any) {
      return (confirmacaoMotivo: any, self: any) => {
          self.bla = 'x';
      }
  }
}

But your class has some problems, for example, attributing the reason is outside the 'afterViewInit' method';

And for example, you can put the variables in the class scope, and create another class method, which typescript will know which 'this' to use.

When in doubt, use the typescript playground:

https://www.typescriptlang.org/play/index.html

Browser other questions tagged angular typescript

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