Controle de estado pela URL

• Controle de estado pela URL

• Quando você utiliza [queryParams] em combinação com routerLink dentro de um elemento de navegação (como um <a> ou <button> que tenha um routerLink), o Angular irá adicionar os parâmetros fornecidos (neste caso, isOpen: true) à URL ao navegar para a rota especificada.

import { Component, OnInit, inject } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { Observable, map } from 'rxjs';

@Component({
  selector: 'nz-demo-modal-basic',
  template: `
    <button
      nz-button 
      nzType='primary' 
      [routerLink]="[]" 
      [queryParams]="{isOpen: true}">
      Abrir Modal
    </button>

    <nz-modal 
      [nzVisible]="isOpen$ | async" 
      nzTitle="Minha Modal" 
      (nzOnCancel)="closeModal()" 
      (nzOnOk)="closeModal()">
      <ng-container *nzModalContent>
        <p>Conteúdo do modal</p>
      </ng-container>
    </nz-modal>
  `,
})
export class NzDemoModalBasicComponent implements OnInit {
  isOpen$: Observable<boolean>;

  private activatedRoute = inject(ActivatedRoute);
  private router = inject(Router);

  ngOnInit(): void {
    this.isOpen$ = this.activatedRoute.queryParams.pipe(
      map(({ isOpen }) => isOpen === 'true')
    );
  }

  closeModal(): void {
    this.router.navigate([], { queryParams: { isOpen: false } });
  }
}