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。 / p>

让我们从英雄之旅中添加一个具体的例子：我在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。看一下这个Lazy loading example

要动态加载组件，您可以使用示例中详细说明的虚拟代理。

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;
}

希望这就是你要找的东西。

Answer 3

尝试使用以下代码。

    import {HeroDetailComponent} from './hero-detail.component';


        @Component({
          selector: 'custom-hero-detail',
          template:`
            <hero-detail param="...">
          `,
          directives: [HeroDetailComponent],
        })
        export class CustomHeroDetailComponent extends HeroDetailComponent{
          // custom code.
        }

您可以扩展组件并在。

中使用该指令

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

3 个答案: