eckigen Klick funktioniert nicht auf meinem div

Question

Wir entwickeln eine eckige Website. Ich kann nicht das Ereignis bekommen auf einem div zu arbeiten:

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

Dies funktioniert, wenn ich wechseln (Klick) auf Onclick:

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

Warum erhalte ich die Warnung mit Onclick aber nicht (Klick)

Answer 1

Winkelausdrücke (was Sie innerhalb des (Klick-) Attributwerts haben) werden immer für die Komponente ausgewertet, die der Vorlage zugeordnet ist. Sie dürfen keine globalen Variablen oder Funktionen in einem eckigen Ausdruck verwenden. Alle Variablen und Funktionsaufrufe werden immer implizit für die Komponente aufgelöst. In Ihrer Komponente gibt es keine alert() -Methode, sodass der Code nicht funktionieren kann.

Um diese Arbeit zu machen, müssen Sie

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

und in dem Komponentencode

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

Bitte beachte, dass ich Ihren Beitrag bearbeitet. Wenn Sie (click) verwenden, verwenden Sie AngularJS nicht. Du benutzt Angular. Sie sind nicht der gleiche Rahmen.

Wenn Sie wirklich AngularJS verwenden, dann funktioniert (klicken) nicht, da dies die in Angular, nicht AngularJS verwendete Syntax ist. Die Syntax in AngularJS würde

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

sein und Sie würden die showAlert Funktion müssen auf den $ Umfang des zugehörigen Controller (alle AngularJS Ausdrücke auf den $ Umfang ausgewertet werden) definiert werden:

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

Den Namen des verwendeten Frameworks zu kennen und die entsprechende Dokumentation zu lesen, wäre ein guter erster Schritt zum Fortschritt.

Answer 2

Wenn Sie Ihren Code nicht veröffentlichen, können wir nicht wissen, was schief gelaufen ist, aber stellen Sie sicher, dass Sie die Funktion innerhalb des Bereichs Ihres Controllers deklarieren, wenn "onclick" für Sie in Ordnung ist Es ist falsch, es bedeutet, dass die Funktion außerhalb jeder Winkelanwendung deklariert wird.

der „ng-click“ für Funktionen arbeiten prop nur die innerhalb des aktuellen Controllers Gültigkeitsbereich deklariert werden (denn das ist, wo Winkel Looks für Ihre Funktion, wenn Sie ng-Klick verwenden)

Answer 3

Dank beide, sehr neu auf Eckig. Ja, ich nahm fälschlicherweise an, Angular v2 sei gleichbedeutend mit AngularJS. Danke, dass du mich informiert hast, dass es nicht ist. Es ist Angular v2, die ich benutze.

Hier ist der Code, den ich von einem anderen Entwickler geerbt haben (die Angular innen und außen wusste):

<!-- 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> 

Im Typoskript-Datei:

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

Ich bin nicht eine Stelle zu sehen in dem Code, in dem Funktionen $ scope zugewiesen werden. Im obigen Typoskript wählen Sie Kategorie (...). Es wird im Winkelcode aufgerufen.Aber clickToFilter_Clicked() funktioniert nicht (wird nicht aufgerufen), obwohl es scheint, dass ich das gleiche mache: