主页 / coding / 问题 / 79573273
Accepted
Aleksandra
Asked: 2025-04-14 21:37:27 +0800 CST

Taiga UI v3 中的 TuiNotification 正确迁移到 v4

  • 772

我正在 Angular 项目中将 Taiga UI 从 v3 迁移到 v4。如果我想将 TuiNotification 用于像 TuiNotification.Warning 这样的常量，那么在 v4 中应该如何使用它呢？这在 v3 中是可以的，但它已经被弃用了，他们建议使用同一个包中的 TuiNotificationT，但在 v4 中不存在它。

以下是当前代码的示例：

...
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 })
    );
  }
}

我得到的错误是 Property 'Warning' does not exist on type 'typeof TuiNotification'.ts

angular

1 个回答

  1. Best Answer

    在 v4 中TuiNotification已从 变为enum组件TuiNotification。

    notification.directive.ts - 源代码

    此外，当我们触发.open方法时，我们必须订阅它，以便弹出窗口打开。

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

    error尽管它不存在于源代码类型中，但外观似乎也有效。

    因此，您需要根据字符串值进行配置。您可以使用以下列表中的值，它就可以正常工作。

    appearance.options.ts - 源代码

    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'
>;

    完整代码：

    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();
}
}

    Stackblitz 演示

    • 1

相关问题