无法在 div 中单击中使用方法

Question

我有一个角度样本，下面是我的app.component.ts文件：

import { Component, OnInit, ViewEncapsulation } from '@angular/core';
import { Router } from '@angular/router';
@Component({
selector: 'app-dashboard',
templateUrl: './dashboard.component.html',
styleUrls: ['./dashboard.component.css'],
encapsulation: ViewEncapsulation.None
})
export class DashboardComponent implements OnInit {
title = 'Core Helper';

constructor(private router: Router) { 
// this.router = Router;
}
navigate() {
this.router.navigate(["docs"]);
}
}

app.component.html

<div id="releasenotes" onclick="navigate()">Release Notes</div>

当我调用此方法时，它会抛出以下错误：

dashboard:27 Uncaught ReferenceError: navigate is not defined
at HTMLDivElement.onclick (dashboard:27)

我不知道如何解决这个问题，我已经尝试过如下

document.getElementById('releasenotes').addEventListener("click", this.navigate);

在这种情况下，路由器未定义

Answer 1

单击处理程序的角度语法写为 (click(="methodName((">

将 app.component.html 代码从

<div id="releasenotes" onclick="navigate()">Release Notes</div>

自

<div id="releasenotes" (click)="navigate()">Release Notes</div>