ディレクティブの外側の要素にクリックイベントを割り当てるにはどうすればよいですか？

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; 
} 

私はtruncate-textクラスがあり、個々の<p>コンテンツをクリックすると1クリックおきに適用され、削除されましたが、[詳細を読む]ボタンをクリックすると、両方とも<p>タグが発生します。

は、私は真/偽にReadMoreDirective閉じられる値を設定するには、ボタンディレクティブを作成しようとしたが、正常に動作していないようです（それはReadMoreDirectiveの範囲ではないので、多分？）：

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

    constructor(private readMore:ReadMoreDirective) {} 

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

これを試してみますと、「No appReadMoreDirectiveのプロバイダがありません」というエラーが表示され、プロバイダのリストに追加すると、新しいReadMoreDirectiveインスタンスが作成されたようです。

おかげ

Answer 1

は、ボタンのクリックイベントにこのような何か試してみてください：

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