Angular 2組件繼承onClick

我想從組件中加入inerit並添加onClick方法，我該怎麼做呢？我想只有一個 html文件。這是一個基本的例子 - 我有這個網站寺廟文件代碼 -Angular 2組件繼承onClick

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

我要繼承這個組件，並添加OnClick方法的H1。

在此先感謝。

來源

2017-08-09 user1137582

您可以使用函數和一個變量在點擊時設置爲true來添加該組件。

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

TS：

variable = false; 

toggleComponent() { 

this.variable = !this.variable; 
}

來源

2017-08-09 12:07:29 grabnem

謝謝您的回答，我期待爲更多自然解決方案。還有一個解決方案，我可以將點擊方法添加到h1中，並將其放入一個組件中，而不會將其用於其他組件。你知道一個自然解決方案嗎？ – user1137582

@ user1137582什麼天性的解決方案，我不明白你的問題？如果你想在點擊時顯示一個組件，這是你做這件事的方式。如果您在多個位置使用一個組件，最好創建Shared文件夾並讓組件在其中多次使用，並像上面的示例一樣顯示它們。 – grabnem

我的問題不是在點擊時顯示組件。我想兩次使用compnent，並在一個instace中使用onclick方法。 – user1137582

像我一樣下面你可以延長部件：

Plunker鏈接 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 {}

來源

2017-08-09 14:29:22

Angular 2組件繼承onClick

回答

相關問題