Angular 2 Komponente erben mit OnClick

Ich möchte von der Komponente inerit und add onClick Methode, wie kann ich es tun? Ich möchte nur eine HTML-Datei haben. Hier ist ein einfaches Beispiel - Ich habe einen Tempel Datei mit diesem HTML-Code-Angular 2 Komponente erben mit OnClick

<h1>h1</h1> 
<h2>h2</h2>

Ich mag diese Komponente erben und füge OnClick Methode auf h1.

Vielen Dank im Voraus.

Quelle

2017-08-09 user1137582

Sie können diese Komponente einfach mit Funktion und einer Variablen hinzufügen, die beim Klicken auf true gesetzt wird.

<button (click)="toggleComponent()"></button> 
<app-example-component *ngIf="variable">

ts:

variable = false; 

toggleComponent() { 

this.variable = !this.variable; 
}

Quelle

2017-08-09 12:07:29 grabnem

für Ihre Antwort Vielen Dank, ich bin auf der Suche für mehr Naturlösung. Es gibt auch eine Lösung, die ich auf Klick-Methode zu H1 hinzufügen und es in einer Komponente implementieren kann und es nicht in anderen implementieren. Kennst du eine Naturlösung? – user1137582

@ user1137582 Welche Natur Lösung, verstehe ich deine Frage nicht? Wenn Sie beim Klicken eine Komponente anzeigen möchten, ist dies die Art und Weise, wie Sie es tun. Wenn Sie eine Komponente an mehreren Stellen verwenden, empfiehlt es sich, einen freigegebenen Ordner zu erstellen und Komponenten, die Sie mehrfach verwenden, in diesem Ordner zu speichern und sie wie im obigen Beispiel anzuzeigen. – grabnem

Meine Frage war nicht, Komponente bei Klick zu zeigen. Ich möchte Compnent zweimal verwenden und in einem Fall möchte ich onclick Methode haben, die etwas tut. – user1137582

Sie können Komponente erweitern, wie ich, wie unten tat:

Plunker Link- https://plnkr.co/edit/azixm9?p=preview

//our root app component 
import {Component, NgModule, VERSION} from '@angular/core' 
import {BrowserModule} from '@angular/platform-browser' 

@Component({ 
    selector: 'my-app', 
    template: ` 
    <div> 
     <h2 (click)="callMe()">Hello {{name}}</h2> 
     <comp-one></comp-one> 
    </div> 
    `, 
}) 
export class App { 
    name:string; 
    constructor() { 
    this.name = `Angular! v${VERSION.full}` 
    } 
    public callMe(compName: any): void { 
    alert("App Component will handle this functionality") 
    } 
} 



@Component({ 
    selector: 'comp-one', 
    template: `<h2 (click)="callMe()">Click Me</h2>`, 
}) 
export class ComponentOne extends App { 

} 
@NgModule({ 
    imports: [ BrowserModule ], 
    declarations: [ App, ComponentOne ], 
    bootstrap: [ App ] 
}) 
export class AppModule {}

Quelle

2017-08-09 14:29:22

Angular 2 Komponente erben mit OnClick

Antwort

Verwandte Themen