angular - 如何覆盖 Angular 2中的指令定义

Question

在 Angular 1 中可以修饰(覆盖)指令定义。

这里有解释:http://www.bennadel.com/blog/2926-overriding-directive-definitions-in-angularjs.htm

有一个内置函数

angular.module("X").decorator(

为此。

在 angular2 中我们没有模块。推荐的方法是使用 typescript 模块。

如何在 angular2 中装饰(覆盖)指令？

我想这样做的主要原因是为了自定义，当我在几个站点中部署我的应用程序时。

假设我有一个包含我所有应用程序的 bundle.js，然后我只想放入一个带有大量自定义项的 customer.js，而不是为每个站点部署更改和重建我现有的 bundle.js。

让我们添加一个来自英雄之旅的具体示例:我在 javascript 文件中定义了我的应用程序组件:

import {Component, OnInit} from 'angular2/core';
import {Hero} from './hero';
import {HeroDetailComponent} from './hero-detail.component';
import {HeroService} from './hero.service';

@Component({
  selector: 'my-app',
  template:`
    <h1>{{title}}</h1>
    <h2>My Heroes</h2>
    <ul class="heroes">
      <li *ngFor="#hero of heroes"
        [class.selected]="hero === selectedHero"
        (click)="onSelect(hero)">
        <span class="badge">{{hero.id}}</span> {{hero.name}}
      </li>
    </ul>
    <my-hero-detail [hero]="selectedHero"></my-hero-detail>
  `,

  directives: [HeroDetailComponent],
  providers: [HeroService]
})

我希望能够在另一个 javascript 文件中将 HeroDetailComponent 与另一个组件 CustomHeroDetailComponent 切换。

这怎么可能？

Answer 1

没有对此 AFAIK 的直接支持。我想底层问题与 https://github.com/angular/angular/issues/5622 相同

作为一种可能的解决方法，您可以创建一个导出所有组件的文件，并在您从那里导入的组件源文件中；然后您可以通过替换此导出文件来更改绑定(bind)。

这很丑陋，因为所有组件都依赖于该全局文件启动。