Inheritance angular2扩展组件但保留模板
有没有一种方法可以扩展/继承angular2组件 假设(为了简单起见)我有一个Inheritance angular2扩展组件但保留模板,inheritance,angular,Inheritance,Angular,有没有一种方法可以扩展/继承angular2组件 假设(为了简单起见)我有一个按钮组件。基于此组件,我想将其扩展为RedButton组件,但使用相同的模板和初始化方法,但仅更改用户按下按钮时发生的情况。这怎么可能 以下是我迄今为止所做的尝试: button.component.ts import {Component, View} from 'angular2/core'; @Component({ selector : 'my-button' }) @View({ temp
按钮
组件。基于此组件,我想将其扩展为RedButton
组件,但使用相同的模板和初始化方法,但仅更改用户按下按钮时发生的情况。这怎么可能
以下是我迄今为止所做的尝试: button.component.ts
import {Component, View} from 'angular2/core';
@Component({
selector : 'my-button'
})
@View({
template : '<button (click)="clicked()">Click</button>'
})
export class ButtonComponent {
constructor() {
}
public clicked(event) {
console.log('Base clicked');
}
}
import {Component, View} from 'angular2/core';
import {ButtonComponent} from './button.component';
@Component({
selector : 'my-redbutton'
})
// typescript complaints here, that RedButton needs a View and template
export class RedButtonComponent extends ButtonComponent {
constructor() {
super();
}
public clicked(event) {
console.log('RED clicked');
}
}
import {Component} from 'angular2/core';
import {ButtonComponent} from './button.component';
import {RedButtonComponent} from './redbutton.component';
@Component({
selector: 'coach-app',
directives : [ButtonComponent, RedButtonComponent],
template: '<h1>Button Test App</h1><my-button></my-button><my-redbutton></my-redbutton>'
})
export class TestAppComponent { }
app.component.ts
import {Component, View} from 'angular2/core';
@Component({
selector : 'my-button'
})
@View({
template : '<button (click)="clicked()">Click</button>'
})
export class ButtonComponent {
constructor() {
}
public clicked(event) {
console.log('Base clicked');
}
}
import {Component, View} from 'angular2/core';
import {ButtonComponent} from './button.component';
@Component({
selector : 'my-redbutton'
})
// typescript complaints here, that RedButton needs a View and template
export class RedButtonComponent extends ButtonComponent {
constructor() {
super();
}
public clicked(event) {
console.log('RED clicked');
}
}
import {Component} from 'angular2/core';
import {ButtonComponent} from './button.component';
import {RedButtonComponent} from './redbutton.component';
@Component({
selector: 'coach-app',
directives : [ButtonComponent, RedButtonComponent],
template: '<h1>Button Test App</h1><my-button></my-button><my-redbutton></my-redbutton>'
})
export class TestAppComponent { }
从'angular2/core'导入{Component};
从“./button.component”导入{ButtonComponent};
从“./redbutton.component”导入{RedButtonComponent};
@组成部分({
选择器:“coach应用程序”,
指令:[ButtonComponent,RedButtonComponent],
模板:“按钮测试应用程序”
})
导出类TestAppComponent{}
不支持扩展类和继承模板(当前?)。您可以使用DI来配置组件
interface ButtonBehavior {
component:any;
onClick(event);
}
class DefaultButtonBehavior implements ButtonBehavior {
component:any;
onClick(event) {
console.log('default button clicked');
}
}
class FancyButtonBehavior implements ButtonBehavior {
component:any;
onClick(event) {
console.log('default button clicked');
}
}
class ButtonComponent {
constructor(private buttonBehavior:ButtonBehavior) {
buttonBehavior.component = this.
}
}
bootstrap(AppComponent, [provide(ButtonBehavior, {useClass: FancyButtonBehavior})])
输入和输出需要额外的接线,因此不太方便,但可行