如何扩展/继承组件?

我想为一些已经部署在Angular 2中的组件创建扩展，而不需要几乎完全重写它们，因为基本组件可以发生变化，并且希望这些变化也能反映在它的派生组件中。

我创建了这个简单的例子，试图更好地解释我的问题:

使用以下基本组件app/base-panel.component.ts:

import {Component, Input} from 'angular2/core';

@Component({
    selector: 'base-panel',
    template: '<div class="panel" [style.background-color]="color" (click)="onClick($event)">{{content}}</div>',
    styles: [`
    .panel{
    padding: 50px;
  }
  `]
})
export class BasePanelComponent { 

  @Input() content: string;

  color: string = "red";

  onClick(event){
    console.log("Click color: " + this.color);
  }
}

你想创建另一个衍生组件，只改变，例如，一个基本组件的行为，在例子color, app/my-panel.component.ts:

import {Component} from 'angular2/core';
import {BasePanelComponent} from './base-panel.component'

@Component({
    selector: 'my-panel',
    template: '<div class="panel" [style.background-color]="color" (click)="onClick($event)">{{content}}</div>',
    styles: [`
    .panel{
    padding: 50px;
  }
  `]
})
export class MyPanelComponent extends BasePanelComponent{

  constructor() {
    super();
    this.color = "blue";
  }
}

完整的工作实例在Plunker

注意:显然这个例子很简单，不需要使用继承就可以解决，但它只是为了说明真正的问题。

正如你在衍生组件app/my-panel.component.ts的实现中看到的，大部分实现是重复的，真正继承的部分是类BasePanelComponent，但是@Component必须基本上完全重复，而不仅仅是改变的部分，作为选择器:'my-panel'。

有没有什么方法可以完全继承angular组件，继承标记/注释的类定义，比如@Component?

编辑1 -功能请求

特性请求angular2添加到GitHub上的项目:扩展/继承angular2组件注释#7968

编辑2 -关闭请求

请求被关闭，因为这个原因，暂时不知道如何合并装饰器将作出。让我们别无选择。所以我的观点在本期杂志上被引用了。

当前回答

你可以继承@Input， @Output， @ViewChild等等。看这个例子:

@Component({
    template: ''
})
export class BaseComponent {
    @Input() someInput: any = 'something';

    @Output() someOutput: EventEmitter<void> = new EventEmitter<void>();

}

@Component({
    selector: 'app-derived',
    template: '<div (click)="someOutput.emit()">{{someInput}}</div>',
    providers: [
        { provide: BaseComponent, useExisting: DerivedComponent }
    ]
})
export class DerivedComponent {

}

2020-04-02 14:41:49

其他回答

更新

从2.3.0-rc.0开始支持组件继承

原始

到目前为止，对我来说最方便的是将模板和样式保存在单独的*html和*.css文件中，并通过templateUrl和styleUrls指定它们，因此易于重用。

@Component {
    selector: 'my-panel',
    templateUrl: 'app/components/panel.html', 
    styleUrls: ['app/components/panel.css']
}
export class MyPanelComponent extends BasePanelComponent

2016-06-09 15:15:41

你可以继承@Input， @Output， @ViewChild等等。看这个例子:

@Component({
    template: ''
})
export class BaseComponent {
    @Input() someInput: any = 'something';

    @Output() someOutput: EventEmitter<void> = new EventEmitter<void>();

}

@Component({
    selector: 'app-derived',
    template: '<div (click)="someOutput.emit()">{{someInput}}</div>',
    providers: [
        { provide: BaseComponent, useExisting: DerivedComponent }
    ]
})
export class DerivedComponent {

}

2020-04-02 14:41:49

据我所知，在Angular 2中还没有实现组件继承，我不确定他们是否计划这样做，不过既然Angular 2使用了typescript(如果你决定这么做的话)，你就可以通过MyClass extends OtherClass{…}。对于组件继承，我建议通过访问https://github.com/angular/angular/issues并提交特性请求来参与Angular 2项目!

2016-04-07 18:43:04

现在TypeScript 2.2通过类表达式支持mixin，我们就有了更好的方法在组件上表达mixin。注意，你也可以从angular 2.3开始使用组件继承(讨论)，或者在其他回答中讨论的自定义装饰器。然而，我认为mixin有一些属性，使它们更适合跨组件重用行为:

Mixins的组合更加灵活，也就是说，你可以在现有组件上混合和匹配Mixins，或者组合Mixins来形成新的组件 Mixin组合仍然很容易理解，这要归功于它对类继承层次结构的明显线性化您可以更容易地避免装饰器和注释的问题，这些问题会困扰组件继承(讨论)

我强烈建议你阅读上面的TypeScript 2.2公告，以了解Mixins是如何工作的。angular GitHub问题中的链接讨论提供了更多细节。

你需要这些类型:

export type Constructor<T> = new (...args: any[]) => T;

export class MixinRoot {
}

然后你可以声明一个类似于Destroyable Mixin的Mixin，它可以帮助组件跟踪需要在ngOnDestroy中释放的订阅:

export function Destroyable<T extends Constructor<{}>>(Base: T) {
  return class Mixin extends Base implements OnDestroy {
    private readonly subscriptions: Subscription[] = [];

    protected registerSubscription(sub: Subscription) {
      this.subscriptions.push(sub);
    }

    public ngOnDestroy() {
      this.subscriptions.forEach(x => x.unsubscribe());
      this.subscriptions.length = 0; // release memory
    }
  };
}

要将可摧毁的组件混合到组件中，你可以这样声明你的组件:

export class DashboardComponent extends Destroyable(MixinRoot) 
    implements OnInit, OnDestroy { ... }

注意，只有当您想要扩展Mixin组合时，才需要使用Mixin root。你可以很容易地扩展多个mixin，例如A扩展B(C(D))。这是我上面谈到的mixin的明显线性化，例如，你有效地组成了一个继承层次结构A -> B -> C -> D。

在其他情况下，例如当你想在一个现有的类上组合Mixin时，你可以像这样应用Mixin:

const MyClassWithMixin = MyMixin(MyClass);

然而，我发现第一种方法最适合组件和指令，因为这些也需要用@Component或@Directive来装饰。

2017-05-13 14:38:39

Angular 2 2.3版本刚刚发布，它包含了原生组件继承。看起来你可以继承和重写任何你想要的东西，除了模板和样式。参考:

Angular 2.3中的新特性 Angular 2中的组件继承演示组件继承的Plunkr

2016-12-27 14:05:34

如何扩展/继承组件?

推荐文章

最新文章

标签