HTML要素のクリック情報の角を抽出する

Question

Udemyコースを受講した後、Angular 4を使用してアプリケーションを作成しています。私はいくつかのイベントで遊んで始めています。これまでのところapp.component.tsというコンポーネントは1つしかありません。私のHTMLでは、私はクリックイベントを添付しているために、このヘッダ要素があります。

<h2 class="url-link" (click)="viewTopics()" #headerLink>View archived topics</h2> 

を私が試してみて、他のHTML要素でのクリックイベントに耳を傾けるH2要素にローカル参照#headerLinkを追加しました。しかし、私はそうすることはできません。

export class AppComponent { 
    @ViewChild('headerLink') headerLink: ElementRef; 

    viewTopics() { 
    console.log(this.headerLink); 
    } 
} 

コンソールログは、のonclickプロパティを持つプロパティnativeElementを持つH2要素を示していますが、このonclickのプロパティは常にnullである：私は、イベント関数の要素のはconsole.logをしました。このようにしてh2要素のclickイベントにアクセスすることは可能ですか、h2要素に対してのみ（クリック）イベントを使用する必要がありますか？ headerIsClickedは、例えばpublicboolean小道具である

Answer 1

<h2 (click)="viewTopics()"></h2> 
<p *ngIf='headerIsClicked === true'>Toggle me</p> 
<h3 *ngIf='headerIsClicked === true'>and me</h3> 

viewTopics(): void { 
    this.headerIsClicked = !this.headerIsClicked; 
    } 

public headerIsClicked: boolean = false;

Answer 2

あなたは

<h2 class="url-link" (click)="viewTopics($event)" #headerLink>View archived topics</h2> 

viewTopics(event){ 
    console.log('evt', event); 
}