angular - 角剪贴板 CDK 在子组件内不起作用

Question

我有一个父组件，其中包含一个包含“复制”按钮的子组件，当按下此按钮时，必须将字符串复制到剪贴板。（注意字符串变量也在子组件里面）

我目前正在使用来自 Angular Material 的 Angular 剪贴板 CDK，并且我正在使用其中一个示例进行测试。

这是代码：

HTML 文件：

<label for="clipboard-example-textarea">Text to be copied</label>
<textarea id="clipboard-example-textarea" cols="30" rows="10" [(ngModel)]="value"></textarea>
<button [cdkCopyToClipboard]="value">Copy to clipboard</button>

TS 文件：

export class ChildComponent{
   value = "test 1 2 3";
}

当我直接在我的父组件中使用相同的代码时，它可以完美地工作，但是当我在我的子组件中使用它时，它会失败而没有错误。（不复制到剪贴板）

结构体：

Parent Component
   Child Component
      Copy button

更新：

我尝试@OUTPUT在我的子组件中添加一个事件发射器，我正在接收我想要正确复制的字符串并且该copy函数返回一个肯定的结果但它仍然没有将字符串复制到剪贴板，这是我尝试的新代码：

export class ParentComponent {
  constructor(private clipboard: Clipboard) {}

  copyLink(link: string) {   
    if (link && link !== '') {            
      const pending = this.clipboard.beginCopy(link);
      let remainingAttempts = 3;
      const attempt = () => {
        const result = pending.copy();
        if (!result && --remainingAttempts) {          
          setTimeout(attempt);
        } else {          
          pending.destroy();
        }
      };
      attempt();
    }
  }

}

父 HTML：

<app-child (generatedLink)="copyLink($event)"></app-child>

子 TS 文件：

@Component({
  selector: 'app-child'
  ...  
})
export class ChildComponent  {  
  link: string = "test";
  @Output() generatedLink = new EventEmitter<string>();

  copyToClipboard(): void {
    this.generatedLink.emit(this.link);      
  }
}

当函数被调用并且结果来自is但没有被复制时，我成功地接收到link我的父组件中的字符串内容。copyToClipboard()pending.copy()true

我错过了什么吗？

标签： angulartypescriptangular-material