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

在角度1中可以装饰(覆盖)指令定义. @H_502_1@这在这里解释：http://www.bennadel.com/blog/2926-overriding-directive-definitions-in-angularjs.htm

@H_502_1@有一个内置函数

@H_502_1@angular.module(“X”).decorator(

@H_502_1@为了这.

@H_502_1@在angular2中,我们没有模块.推荐的方法是使用typescript模块.

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

@H_502_1@我想做这个的主要原因是用于自定义,当我在几个网站部署我的应用程序.

@H_502_1@假设我有一个bundle.js与我的所有应用程序,我想然后只需要放入一个customer.js一堆自定义,而不是更改和重建我现有的bundle.js为每个站点部署.

@H_502_1@让我们从英雄之旅中增加一个具体的例子：
我在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]
})

@H_502_1@我想要在另一个javascript文件中切换HeroDetailComponent与另一个组件CustomHeroDetailComponent.

@H_502_1@这怎么可能？

我已经做了类似于动态加载自定义模块的操作,并为POC配置了RouteConfig注释.要从脚本导入脚本文件,我们需要使用动态模块加载程序 – Systemjs.看看这个 Lazy loading example @H_502_1@要加载组件动态,可以使用示例中详细介绍的虚拟代理.

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

@H_502_1@并为虚拟代理 –

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

@H_502_1@希望这是你正在寻找的.

原文链接：https://www.f2er.com/angularjs/142922.html

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

猜你在找的Angularjs相关文章