Angular 没有剪贴板的提供者

Question

我正在使用 Angular 9 并尝试以编程方式使用剪贴板模块。

  constructor(
    private clipboard: Clipboard
  ) {}

它只是不会编译

它在控制台中给出了以下内容。

NullInjectorError: No provider for Clipboard!

我在 app.module.ts providers 数组中添加了“剪贴板”。它也不起作用

它正在给

zone-evergreen.js:659 Unhandled Promise rejection: Illegal constructor ; Zone: <root> ; Task: Promise.then ; Value: TypeError: Illegal constructor
    at Object.factory (core.js:17177)
    at R3Injector.hydrate (core.js:17053)
    at R3Injector.get (core.js:16803)
    at NgModuleRef$1.get (core.js:36454)
    at Object.get (core.js:34091)
    at getOrCreateInjectable (core.js:5830)

我错过了什么？

Answer 1

确保您导入正确的“剪贴板”

import { Clipboard } from '@angular/cdk/clipboard';

constructor(private clipboard: Clipboard) {

}

然后使用这个功能

 private copyToClipboard(str:string) {
    const pending = this.clipboard.beginCopy(str);

      let remainingAttempts = 3;
      const attempt = () => {
        const result = pending.copy();
        if (!result && --remainingAttempts) {
          setTimeout(attempt);
        } else {
          // Remember to destroy when you're done!
          pending.destroy();
        }
      };
      attempt();
  }

Answer 2

我认为您忘记包含 ClipBoard 的导入（在构造函数中注入 ClipBoard 的文件中）：

import {Clipboard} from "@angular/cdk/clipboard"

因为 ClipBoard 也存在于 Windows 上，但它不是相同的 API：

interface Clipboard extends EventTarget {
    readText(): Promise<string>;
    writeText(data: string): Promise<void>;
}

因此，如果您忘记导入，也不会出现任何错误。但是当 Angular 尝试注入它时，它不会找到一个提供者。

Answer 3

您需要导入将其ClipboardModule注册Clipboard为提供商的 。

请参阅下面的剥离示例。我省略了您要放入模块中的所有其他内容，只专注于ClipboardModule.

import {NgModule} from '@angular/core';
import {ClipboardModule} from '@angular/cdk/clipboard';

@NgModule({
  imports: [ClipboardModule]
})
export class AppModule {}()