html - 如何将点击事件分配给指令外的元素？

Question

我目前有一个自定义指令，如果文本超过 3 行，它会截断文本。现在，如果您直接单击文本本身，它就可以工作，但我想将单击事件分配给一个按钮。这是我当前的代码:

@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();
  }
}

当我尝试这样做时，它会抛出一条错误消息“No provider for appReadMoreDirective”，而当我将其放入提供者列表时，它似乎创建了一个新的 ReadMoreDirective 实例。

谢谢

Answer 1

在按钮点击事件上尝试这样的事情:

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