如何使用Angular 19独立显示Primeng对话？

Question

app.route.ts

export const routes: Routes = [
  {
    path: 'account',
    component: AccountLayoutComponent,
    data: {
      permission: null,
      navigation: new PrimeNavigation('account', 'Login', [
        new NavigationItem('Login', 'Login', 'account/login'),
      ])
    },
    children: [
      {
        path: 'login',
        component: LoginComponent,
        providers: [DialogService, ToasterService]
      },
    ]
  }
]

toaster.service.ts

@Injectable({
  providedIn: 'root',
})
export class ToasterService {
  constructor(private readonly _dialogService: DialogService) { }

  public showError(message: string, isButtonVisible = false, textButton = 'Close'): DynamicDialogRef {
    return this.show(message, 'far fa-times-circle', isButtonVisible, textButton);
  }

  public show(message: string, icon: string | null, isButtonVisible = false, textButton = 'Close', isProgress = false): DynamicDialogRef {
    return this._dialogService.open(ToasterComponent, {
      header: 'Choose a Product',
      width: '70%',
      contentStyle: { "max-height": "500px", "overflow": "auto" },
      baseZIndex: 1000
    })
  }
}

login.component.ts

@Component({
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.scss'],
  standalone: true
})
export class LoginComponent {
  constructor(private readonly _toasterService: ToasterService) {}

  public onLoginClick(): void {
    *skip all the useless part*
    this.myService.authenticate(myData: MyObject)
    .pipe(...)
    .subscribe({
      next: () => { },
      error: (error) => {
        this._toasterService.showError('Auth failed!'); <= Here is the call
      }
    });
  }
}

我忘记了一些使它起作用的东西吗？

trory在组件级别而不是在路由级别上添加提供商。

@Component({
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.scss'],
  standalone: true,
  providers: [DialogService, ToasterService]
})
export class LoginComponent {
  ...