如何覆盖角度2中的指令定义

Question

在角度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文件中定义了我的app组件:

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相同

作为一种可能的解决方法,您可以创建一个文件,用于导出所有组件以及从那里导入的组件源文件; 然后,您可以通过替换此导出文件来更改绑定.

它很难看,因为所有组件都依赖于该全局文件.

Answer 2

我做了类似动态加载自定义模块并为 POC 配置 RouteConfig 注释的操作。要从脚本导入脚本文件，我们需要使用动态模块加载器 - Systemjs。看看这个延迟加载示例

要动态加载组件，您可以使用虚拟代理，如示例中详述。

directives: [componentProxyFactory({'compName':'CustomHeroDetailComponent'})],

对于虚拟代理 -

export class ComponentProvider {
    compName:string;
}

export class ComponentDetail {
    path: string;
    name: string;
}

@Injectable()
export class DynamicComponentLoaderService
{
   //implement component lookup logic
    getComponentDetail(compName: string):ComponentDetail{
        return {'path':'./path/to/comp/custom.herodetail.component', 'name':'CustomHeroDetailComponent'};
    }    
}

export function componentProxyFactory(provider: ComponentProvider): Type {
    @Component({
        selector: 'component-proxy',
        template: `<span #content></span>`,
        providers: [provide(ComponentProvider, { useValue: provider})]
    })
    class VirtualComponent {
        constructor(el: ElementRef,loader:DynamicComponentLoader, inj:Injector, _service: DynamicComponentLoaderService, provider:ComponentProvider)
        {
            var compDetail = _service.getComponentDetail(provider.compName);
            System.import(compDetail.path)
                .then(m => {
                    loader.loadIntoLocation(m[compDetail.name], el, 'content');
                });
        }
    }
    return VirtualComponent;
}

希望这就是您正在寻找的。