html - 如何为指令外的元素分配click事件？

我目前有一个自定义指令，如果长度超过3行，该指令将截断文本。现在，如果您直接单击文本本身，则可以使用，但是我想将click事件分配给按钮。这是我当前的代码：

@Directive({
  selector: '[appReadMore]'
})
export class ReadMoreDirective {

  constructor() { }

  @HostBinding('class.truncate-text') get opened() {
    return this.isClosed;
  }
  @HostListener('click') open() {
    this.isClosed = (this.isClosed === true ? false : true);
  }

  private isClosed = true;

}

在我的html文件中，我有：

<div class="container" *ngFor="let book of books">
  <div>
    <p appReadMore>
      {{Text 1}}
    </p>
    <p appReadMore>
      {{Text 2}}
    </p>
  </div>
  <div>
    <button appReadMoreTrigger>Read more</button>
  </div>
</div>

和我的CSS：

.truncate-text {
   overflow: hidden;
   display: -webkit-box;
   -webkit-line-clamp: 3;
   -webkit-box-orient: vertical;
}

当我单击每个单独的<p>内容时，将应用truncate-text类，并删除其他所有单击，但是当我单击“阅读更多”按钮时，我希望这两个<p>标签都发生这种情况。

我尝试创建一个按钮指令以将ReadMoreDirective isClosed值设置为true / false，但它似乎无法正常工作（也许是因为它不在ReadMoreDirective的范围之内？）：

@Directive({
  selector: '[appReadMoreTrigger]',
})
export class ReadMoreTriggerDirective{

  constructor(private readMore:ReadMoreDirective) {}

  @HostListener('click') open() {
    this.readMore.open();
  }
}

当我尝试执行此操作时，它会抛出一个错误消息：“没有为appReadMoreDirective提供程序”，当我将其放入提供程序列表中时，它似乎创建了一个新的ReadMoreDirective实例。

谢谢

最佳答案

在按钮单击事件上尝试以下操作：

document.querySelectorAll('[appReadMore]').classList.toggle('truncate-text')