Angular Function Guard 内部的 Kendo 对话框

Question

我正在尝试（没有成功）在 Angular 16 CanActivate 功能防护中实现确认消息。此确认正在尝试使用 Kendo Dialog Service 来创建对话框。

LogoutGuard 被触发（由日志记录证明）。

这是代码：

注销.guard.ts：

export const logoutGuard: CanActivateFn = (route, state) => {

  const dialogService : DialogService = inject(DialogService);

  console.warn("Entered logoutGuard");

  // get a Kendo dialogref
  const dialog = dialogService.open({
    title: "Please Confirm",
    content: "Are you sure you wish to log out?",
    actions: [
      { text: "Yes", themeColor: "primary"},
      { text: "No"}
    ],
    //appendTo: "test"
  });

  return dialog.result.pipe(
    tap((result) => console.log("Extraneous logging message")),
    map((result) => {
      logger.debug(`Result of dialog: ${JSON.stringify(result)}`);

      // if the user just closed the dialog, don't log out
      if (result instanceof DialogCloseResult) {
        return false;
      }

      return "Yes" === result.text;

    })
  );
 
};

正如这个问题中提到的，app.component.ts 中有以下行：

<div>
  <div kendoDialogContainer></div>
  <app-container></app-container>
</div>

由于存在对 kendoDialogContainer 的引用，我确保在 app.module.ts 中引用了 Kendo 的 DialogsModule：

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    CommonModule,
    BrowserModule,
    // IconsModule,
    BrowserAnimationsModule,
    DialogsModule,
    // removed irrelevant imports
  ],
  providers: [
    // WARNING: Angular initializes APP_INITIALIZER concurrently, not consecutively. The factory
    // function is used to to control the chain of events needed to initialize the app, and
    // run them in the order required    
    { provide : APP_INITIALIZER, useFactory: initApplication, multi: true},
 
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

我无法在

<div>

上放置模板引用，因为在守卫内部，我无法获取 ViewRef （据我所知）。

有人可以帮忙吗？

Answer 1

除了搜索引擎索引我的帖子之外，所有人都忽略了我，但我找到了答案。

我在子容器中有第二个

kendoDialogContainer

。一旦我把它拿出来，弹出窗口就工作正常了。