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

发布时间：2020-12-17 07:43:39 所属栏目：安全来源：网络整理

导读：在角度1中可以装饰(覆盖)指令定义. 这在这里解释：http://www.bennadel.com/blog/2926-overriding-directive-definitions-in-angularjs.htm 有一个内置函数 angular.module(“X”).decorator( 为了这. 在angular2中,我们没有模块.推荐的方法是使用typescript

在角度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.

这怎么可能？

我已经做了类似于动态加载自定义模块的操作,并为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;
}

希望这是你正在寻找的.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!