Question

我想从组件中删除并添加onClick方法，我该怎么办？我想只有一个 html文件。这是一个基本的例子 - 我有一个带有这个HTML代码的寺庙文件 -

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

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

提前致谢。

Answer 1

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

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

TS：

variable = false;

toggleComponent() {

this.variable = !this.variable;
}

Answer 2

您可以像我一样扩展组件，如下所示：

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

Angular 2组件继承onClick

2 个答案: