Início / coding / Perguntas / 79573273
Accepted
Aleksandra
Asked: 2025-04-14 21:37:27 +0800 CST

Migração adequada de TuiNotification em Taiga UI v3 para v4

  • 772

Estou migrando a interface Taiga UI da versão 3 para a versão 4 em um projeto Angular. Como a TuiNotification deve ser usada na versão 4, se eu quiser usá-la para constantes como TuiNotification.Warning? Isso funcionava na versão 3, mas foi descontinuado e sugeriram usar a TuiNotificationT do mesmo pacote, mas ela não existe na versão 4.

Veja um exemplo de como o código atual se parece:

...
import { TuiNotification } from '@taiga-ui/core';
...

@Injectable()
export class SomeInputService extends RxState<{
}> {
  constructor(
    private notifications: TuiAlertService
  ) {
    super();

    this.doSomething();
  }

  private doSomething() {
    if (!something) {
       return this.showNotification(
         marker('Not working'), 
         marker('Wrong file'),
         **TuiNotification.Warning**       
       );
    }
    else {
       return this.showNotification(
         marker('Some error'),
         text ?? '',
         **TuiNotification.Error**
       );
    }
  }

  private showNotification(
    title: string,
    text: string,
    status: TuiNotification
  ) {
    const label = this.transloco.translate(title);
    const message = this.transloco.translate(text);
    this.hold(
      this.notifications.open(message, { status, label, autoClose: 10000 })
    );
  }
}

O erro que recebo é Property 'Warning' does not exist on type 'typeof TuiNotification'.ts

angular

1 respostas

  1. Best Answer

    Na v4 TuiNotificationmudou de um enumpara um componente TuiNotification.

    notification.directive.ts - Código-fonte

    Além disso, quando disparamos .openum método, precisamos nos inscrever nele para que o pop-up seja aberto.

    private showNotification(label: string, message: string, appearance: string) {
    this.notifications.open(message, { label, appearance }).subscribe();
}

    A erroraparência também parece funcionar, mesmo que não esteja presente no tipo de código-fonte.

    Então você precisa configurá-lo com base em valores de string. Você pode usar os valores da lista abaixo e funcionará.

    appearance.options.ts - Código-fonte

    type Appearance = TuiLooseUnion<
    | 'accent'
    | 'action-destructive'
    | 'action-grayscale'
    | 'action'
    | 'flat-destructive'
    | 'flat-grayscale'
    | 'flat'
    | 'floating'
    | 'glass'
    | 'icon'
    | 'info'
    | 'negative'
    | 'neutral'
    | 'outline-destructive'
    | 'outline-grayscale'
    | 'outline'
    | 'positive'
    | 'primary-destructive'
    | 'primary-grayscale'
    | 'primary'
    | 'secondary-destructive'
    | 'secondary-grayscale'
    | 'secondary'
    | 'textfield'
    | 'warning'
>;

    Código completo:

    import {
ChangeDetectionStrategy,
Component,
inject,
Injectable,
} from '@angular/core';
import {
TuiAlertService,
TuiAppearance,
TuiAppearanceOptions,
TuiButton,
} from '@taiga-ui/core';

import { TuiNotification } from '@taiga-ui/core';

@Injectable({
providedIn: 'root',
})
export class SomeInputService {
constructor(private notifications: TuiAlertService) {
    this.doSomething();
}

private doSomething() {
    return this.showNotification('Not working', 'Wrong file', 'error');
}

private showNotification(label: string, message: string, appearance: string) {
    this.notifications.open(message, { label, appearance }).subscribe();
}
}

@Component({
selector: 'app',
standalone: true,
exportAs: 'Example1',
imports: [TuiButton],
templateUrl: './app.template.html',
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class App {
private readonly alerts = inject(TuiAlertService);
private readonly someService = inject(SomeInputService);

protected showNotification(): void {
    this.alerts
    .open('Basic <strong>HTML</strong>', { label: 'With a heading!' })
    .subscribe();
}
}

    Demonstração do Stackblitz

    • 1

relate perguntas