Angular 2组件继承onClick

问题描述：

我想从组件中加入inerit并添加onClick方法，我该怎么做呢？我想只有一个 html文件。这是一个基本的例子 - 我有这个网站寺庙文件代码 -Angular 2组件继承onClick

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

我要继承这个组件，并添加OnClick方法的H1。

在此先感谢。

答

您可以使用函数和一个变量在点击时设置为true来添加该组件。

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

TS：

variable = false; 

toggleComponent() { 

this.variable = !this.variable; 
}

谢谢您的回答，我期待为更多自然解决方案。还有一个解决方案，我可以将点击方法添加到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 {}

Angular 2组件继承onClick

相关推荐