Angular 17 中的 NG 块 UI

Question

我尝试在 Angular 17 中使用 NG Block UI 并收到此错误

知道这个模块在 Angular 17 中如何工作吗？

提前致谢

我使用 npm i ng-block-ui 安装了模块，文档说必须将 BlockUIModule.forRoot() 添加到“app.module.ts”文件的导入中，但我没有在角度 17 中指定文件

Answer 1

以下是使用流程

ng-block-ui

1. 使用

   npm i ng-block-ui@next

   安装ng-block-ui，正常安装会出现问题，所以我这样做了。

2. 然后导入模块和提供程序，如下例所示，

   importProvidersFrom(BlockUIModule.forRoot())

   -> 将获取全局级别所需的提供程序

   imports: [CommonModule, BlockUIModule],

   -> 将为组件导入组件等。

希望您的问题得到解决！

main.ts

import { CommonModule } from '@angular/common';
import { Component, importProvidersFrom } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';
import { BlockUIModule, BlockUI, NgBlockUI } from 'ng-block-ui';
import 'zone.js';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule, BlockUIModule],
  template: `
  <!-- Wrap app in block-ui component -->
<block-ui>
    <section class="hero">
        <h1>NG Block UI</h1>
        <p>Block UI Implementation for Angular 2 & Up</p>
        <iframe src="https://ghbtns.com/github-btn.html?user=kuuurt13&repo=ng-block-ui&type=star&size=large" frameborder="0" scrolling="0"
         width="75px" height="30px"></iframe>
    </section>
    <section class="block-form">
        <input class="control control__input" type="text" placeholder="Custom Message" #blockMessage />
        <button class="control control__btn" (click)="toggleBlocking(blockMessage.value)">
      Start Blocking
    </button>
    </section>
</block-ui>
  `,
  styleUrl: 'main.css'
})
export class App {
  // Wires up BlockUI instance
  @BlockUI() blockUI!: NgBlockUI;

  constructor() {}

  toggleBlocking(message?: string) {
    this.blockUI.start(message);

    setTimeout(() => {
      this.blockUI.stop();
    }, 2500);
  }
}
bootstrapApplication(App, {
  providers: [importProvidersFrom(BlockUIModule.forRoot())],
});

堆栈闪电战

参考 Angular 7 的 stackblitz