Question

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

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

当我切换（点击）到onclick：

时，这是有效的

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

为什么我通过onclick获取警报但没有（点击）？

Answer 1

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

要做到这一点，你需要

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

，并在组件代码中

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

请注意，我编辑了您的帖子。如果您使用的是(click)，那么您就不会使用AngularJS。你正在使用Angular。它们不是同一个框架。

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

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

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

$scope.showAlert = function(message) {
  window.alert(message);
}

了解您正在使用的框架的名称，并阅读相应的文档，这将是一个很好的进步的第一步。

Answer 2

如果你没有发布你的代码，我们无法知道出了什么问题，但确保你在控制器的范围内声明了这个功能，如果使用“onclick”对你有用，那你就是声明它错误，这意味着该函数在任何有角度的应用程序之外声明。

“ng-click”prop仅适用于在当前控制器范围内声明的函数（因为当你使用ng-click时，这就是angular查找函数的位置）

Answer 3

非常感谢Angular。是的，我错误地认为Angular v2是AngularJS的同义词。谢谢你告诉我它不是。我正在使用它的Angular v2。

这是我从另一位开发人员（从内到外了解Angular）继承的代码：

    <!-- 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!");
}
}

我没有在代码中看到将函数分配给$ scope的位置。在上面的打字稿中，selectCategory（...）有效。它在角度代码中被调用。然而clickToFilter_Clicked（）不起作用（没有被调用），即使我似乎在做同样的事情：

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

角度点击不会对我的div工作

3 个答案: