3

Observem o código abaixo;

import { Location } from '@angular/common';
@Component({
  selector: 'app-node-paginate',
  templateUrl: './node-paginate.component.html',
  styleUrls: ['./node-paginate.component.css']
})
export class NodePaginateComponent implements OnInit {
  constructor(private location: Location) {}

  ngOnInit() {
      this.load();
  }

  load() {
      location.reload()
    }

Esse código acima ele efetua um refresh na tela ininterruptamente, mas o que de fato preciso é que ele faça somente um refresh.

Meu objetivo é quando o usuário acessar a pagina, a pagina consiga efetuar um refresh de tela, mas precisa ser somente um refresh e não vários como está acontecendo hoje.

A pedido de Guilherme Costamilam

Esse é problema que estou tendo também; inserir a descrição da imagem aqui

Estou usando a versão 6 do Angular.

Eu tentei também dessa forma para saber o que saiu no console.log;

import { Component, OnInit, HostListener } from '@angular/core';
import { Location } from '@angular/common';

@Component({
  selector: 'app-node-paginate',
  templateUrl: './node-paginate.component.html',
  styleUrls: ['./node-paginate.component.css']
})
export class NodePaginateComponent implements OnInit {
  public innerWidth: any;



  constructor(private location: Location) {}

  ngOnInit() {
      this.innerWidth = window.innerWidth;
      console.log(this.innerWidth);
      this.load();
  }

  load() {
    console.log(sessionStorage);
    //Session storage salva os dados como string
    (sessionStorage.refresh == 'true' || !sessionStorage.refresh) && location.reload();
    sessionStorage.refresh = false;
  }

  @HostListener('window:resize', ['$event'])
  onResize(event) {
    this.innerWidth = window.innerWidth;
  }

}

E tive esse resultado;

inserir a descrição da imagem aqui

Porém não entendo porque não está reconhecendo a variável refresh

1

5 Respostas 5

2

De forma simples, guarda em session/local storage se já foi ou não recarregado e usa como condicional para carregar novamente:

ngOnInit() {
  this.load();
}

load() {
  //Session storage salva os dados como string
  (sessionStorage.refresh == 'true' || !sessionStorage.refresh) && location.reload();
  sessionStorage.refresh = false;
}

Você também pode ter uma variável na url que defina isso, porém, em vez de apenas recarregar, teria que redirecionar para outra url, por exemplo, dominio.com/foo/true/ irá recarregar, dominio.com/foo/false/ ou dominio.com/foo não irão recarregar, dai no seu componente você verifica o valor da variável na url em vez do session/local storage

13
  • a variavel refresh não foi reconhecida no meu projeto Angular.
    – user10264
    Commented 5/09/2018 às 15:56
  • Editei a reposta com uma correção, pode ser isso, se não, de um console.log(sessionStorage.refresh) no angular e comente o reload, aparece o valor eperado?
    – Costamilam
    Commented 5/09/2018 às 16:07
  • não tem como eu dar um console.log(sessionStorage.refresh) porque ele diz que a propriedade refresh não existe do tipo 'Storage'
    – user10264
    Commented 5/09/2018 às 16:14
  • está dando erro de compilação? Se é, define como : any. Testei aqui e funcionou normal, qual a sua versão?
    – Costamilam
    Commented 5/09/2018 às 16:26
  • eu atualizei minha postagem, poderia dar uma olhada por favor.
    – user10264
    Commented 5/09/2018 às 16:29
2

Eu enfrentei um problema similar, para resolver eu coloquei uma variável no meu Service, algo como:

export class MyService {
  reload = true;
  constructor() { }
}

E em meu componente criei a função reload que muda a rota e depois volta para a rota atual (não sei se em seu caso resolveria, pois é um reload apenas de componente e não da aplicação como um todo):

  reload() {
    if (this.myService.reload) {
      this.router.navigateByUrl('/', { skipLocationChange: true }).then(() => {
        this.router.navigate(['minha-rota']);
        this.myService.reload = false;
      });
    }
  }

Com isso basta coloca-la para rodar no ngOnInit:

  ngOnInit() {
    this.reload();
  }

Obs: O meu caso era um pouco diferente, eu tinha que fazer reload após determinada ação do usuário, tentei adaptar para a sua realidade, não sei se terá algum efeito colocateral.

2

Talvez você possa realizar com Session Storage mesmo, porém eu faria de uma forma um pouco diferente.

ngOnInit() {
  this.load();
}

load() {
  const HAS_RELOAD = 'hasReload';  // Ao invés de passar a string 'hasRealod' diretamente é melhor criar uma constante para evitar erros de digitação
  const hasReload = sessionStorage.getItem(HAS_RELOAD);
  if (!hasReload) {
    sessionStorage.setItem(HAS_RELOAD, 'true');
    location.reload();
  }
}
2

Pelo que entendi seu segundo código está funcionando, visto que você postou o resultado do console. Então após efetuar o primeiro refresh ele para por ali visto que o sessionStorage.refresh tem o valor false. Já o primeiro código realmente está em loop mas basta utilizar o exemplo do segundo para corrigir o primeiro.

Código testado e funcionando retirado do seu exemplo:

import { Component } from '@angular/core';
import { Location } from '@angular/common';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular';
  constructor() { }

  ngOnInit() {
      console.log('ngOnInit', (new Date()).toTimeString());
      this.load();
  }

  load() {
    console.log('sessionStorage', sessionStorage);
    (sessionStorage.refresh == 'true' || !sessionStorage.refresh) 
        && location.reload();
    sessionStorage.refresh = false;
  }
}

Porém não entendo porque não está reconhecendo a variável refresh

Existe uma validação de tipagem no TypeScript e por esta razão você está recebendo a mensagem "TS: A propriedade refresh não existe no tipo Storage" já que realmente a esta propriedade não existe em localStorage nem na sessionStorage.

Uma solução é utilizar os método sessionStorage.getItem("refresh") e sessionStorage.setItem("refresh", "true") ao invés de utilizar o modo "Object Like (sessionStorage.minhaPropriedade)". Outra alternativa é tipar como any:

(<any>(localStorage)).refresh
(localStorage as any).refresh

Pesquisando mais um pouco, dentro do VS Code pressione o ctrl e clique sob o sessionStorageaté chegar na definição da sua interface. Lá deve constar a última linha do código abaixo:

interface Storage {
    /* ... conteúdo omitido */
    setItem(key: string, value: string): void;
    [name: string]: any;
}

Caso não tenha, verifique a versão do seu TSLint ou inclua esta última linha e a mensagem supracitada irá desaparecer.

Referência deste problema: https://github.com/Microsoft/TypeScript/issues/26083

1

Cara, é só por quê você criou uma função load() que faz um reload e a colocou no ngInit. O ngInit executa tudo que está dentro dele ao iniciar uma página, ou seja, virou um loop infinito.

iniciou a página > ngInit ativou o load() > reiniciou a página > ngInit ativou o load() > reiniciou a página

Você deve fazer log-in para responder a esta pergunta.