Angular 角度点击赢得'；我不能在我的沙发上工作

我们正在开发一个有角度的网站。我无法让事件在div上运行：

<div style="width: 100%; height: 30px;" (click)="alert('Hello!')"></div>

当我切换（单击）到onclick时，此选项起作用：

<div style="width: 100%; height: 30px;" onclick="alert('Hello!')"></div>

为什么我会通过onclick而不是（单击）获得警报？

角度表达式（您在（单击）属性值中拥有的内容）始终在与模板关联的组件上求值。不能在角度表达式中使用全局变量或函数。所有变量和函数调用总是隐式地在组件上解析。组件中没有alert（）方法，因此代码无法运行

要让它工作，你需要

(click)="showAlert('Hello')"

并且，在组件代码中

showAlert(message) {
  window.alert(message);
}

注意，我编辑了你的文章。如果您使用的是

（单击）

，那么您没有使用AngularJS。你用的是角度。它们不是同一个框架

如果你真的在使用AngularJS，那么（单击）将不起作用，因为这是AngularJS中使用的语法，而不是AngularJS。AngularJS中的语法是

ng-click="showAlert('Hello');

您需要在关联控制器的$scope上定义showAlert函数（所有AngularJS表达式都在$scope上求值）：

---

了解您正在使用的框架的名称，并阅读适当的文档，将是前进的良好第一步。

如果您不发布代码，我们无法知道发生了什么错误，但请确保您在控制器的作用域内声明函数，如果使用“onclick”对您来说很好，那么您就是在声明错误，这意味着函数是在任何角度应用程序之外声明的

---

“ng click”道具仅适用于在当前控制器范围内声明的函数（因为当您使用ng click时angular会在该范围内查找您的函数）

感谢这两种方法，angular非常新。是的，我错误地认为AngularV2是AngularJS的同义词。谢谢你告诉我不是这样的。我用的是角度v2

下面是我由另一位开发人员继承的代码（他对Angular了如指掌）：

我在代码中没有看到函数被分配给$scope的地方。在上面的typescript中，选择Category（…）可以工作。它是从角度代码中调用的。但是clickToFilter_Clicked（）不起作用（不会被调用），尽管我似乎在做同样的事情：

<div (click)="clickToFilter_Clicked()"></div>

请发布您的代码。这是棱角的还是棱角的？AngularJS（>v2）使用括号绑定，AngularJS不使用。

    <!-- filter -->
    <div class="filter" (click)="clickToFilter_Clicked()"> **<!-- This is where I'm having trouble -->**
...
    </div>

    <!-- data list -->
    <div class="data-list">
        <all-data-row *ngFor="let item of categoryRows; let last=last"
                        relativeWidth="100"
                        [item]="item.chartData"
                        [last]="last"
                        (click)="selectCategory(item.fullObject)" **<!-- This works somehow -->**
                        [selected]="selected">
        </all-data-row>
    </div>

import { Component, ViewEncapsulation, OnInit, OnDestroy, Input } from '@angular/core';

@Component({
selector: 'all-data-page',
templateUrl: './all-data-page.component.html',
styles: [ require('./all-data-page.style.scss') ],
})
export class AllDataPageComponent implements OnInit {
@Input() allData: any;
@Input() type: any;

private criticalityChartData: any[] = [];
private categoryRows: any[] = [];
private selected: any = null;

private colors: any = {
    'Safeguards': {
        'MEC': '#8f8fc6',
        'MEC-P': '#ebb174',
        'BPCS': '#2eb9ba',
        'BPCS-T': '#5a96d0',
        'BPCS-C': '#c0db73',
        'SIS-A': '#e5cf2d',
        'SIS': '#f69c94',
        'Other LS': '#ea7474',
        'Other LS-T': '#50c0a4',
        'Other LS-C': '#81c341',
        'PRO': '#6f6db2',
        'ROUND': '#b94a9c',
        'PM': '#ca94c2',
        'OCC': '#1cac5c',
        'OTHER': '#d56853'
    }
};

ngOnInit(): void {
    this.allData.forEach((category) => {
        if (category != null && category.Title === this.type) {
            if (!!category.CriticalityPieChart) {
                this.criticalityChartData = category.CriticalityPieChart;
                category.Items.forEach((item) => {
                    this.categoryRows.push({
                        'fullObject': item,
                        'chartData': {
                            'ValueColor': item != null ? this.colors[this.type][item.Category] : '',
                            'Value': item != null ? item.Criticality : '0.0',
                            'ValueLabel': item != null ? item.Title : ''
                        }
                    });
                    if (this.selected === null) {
                        this.selected = this.categoryRows[0].fullObject;
                    }
                });
            }
        }
    });
}

**// This function gets called:**
selectCategory(category) {
    this.selected = category;
}

closeDetails() {
    this.selected = null;
}

**// This function doesn't get called:**
clickToFilter_Clicked() {
    alert("Clicked!");
}
}

<div (click)="clickToFilter_Clicked()"></div>