Angular 2 组件通过 onClick 继承答案

【问题标题】：Angular 2 component inherit with onClickAngular 2 组件通过 onClick 继承
【发布时间】：2018-01-16 22:30:54
【问题描述】：

我想从组件中初始化并添加 onClick 方法，我该怎么做？我只想拥有一个 html 文件。这是一个基本示例 - 我有一个带有这个 html 代码的寺庙文件-

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

我想继承这个组件并在h1上添加OnClick方法。

提前致谢。

【问题讨论】：

标签： html typescript angular2-template

【解决方案1】：

您可以只添加具有函数的组件和一个在点击时设置为 true 的变量。

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

ts：

variable = false;

toggleComponent() {

this.variable = !this.variable;
}

【讨论】：

感谢您的回答，我正在寻找更多自然的解决方案。还有一个解决方案，我可以将 click 方法添加到 h1 并在一个组件中实现它而不在另一个组件中实现它。你知道自然解决方案吗？
@user1137582 什么自然解决方案，我不明白你的问题？如果您想在单击时显示组件，这就是您的操作方式。如果您在多个地方使用一个组件，最好创建共享文件夹并将您多次使用的组件保存在其中，并像上面的示例一样显示它们。
我的问题不是在点击时显示组件。我想使用 compnent 两次，并且在一个实例中我想使用 onclick 方法来做某事。

【解决方案2】：

你可以像我这样扩展组件：

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 {}

【讨论】：