Как назначить событие click для элемента вне директивы?

Question

В настоящее время у меня есть настраиваемая директива, которая обрезает текст, если длина превышает 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 истина/ложь, но это, кажется, не работает правильно (возможно, потому что это не в рамках ReadMoreDirective?):

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

    constructor(private readMore:ReadMoreDirective) {} 

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

Когда Я пробую это, он выдает сообщение об ошибке «Нет провайдера для appReadMoreDirective», и когда я помещаю его в список поставщиков, похоже, что он создает новый экземпляр ReadMoreDirective.

Благодаря

Answer 1

попробовать что-то вроде этого на события нажатия кнопки:

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