Angular 2 覆盖组件

Posted 2023-02-18

【中文标题】Angular 2 覆盖组件

【英文标题】：Angular 2 override components

【发布时间】：2017-04-05 16:42:52

【问题描述】：

我来自Laravel 世界，对Angular 2 世界有点陌生，我很难弄清楚：

是否可以在 Angular 2 中覆盖组件或模板，就像我们在 Laravel 中覆盖供应商/自定义包的视图一样？

这是一个虚拟文件夹结构，可以表达我的意思：

|-resources
   |-assets
      |-typescript
         |-core
            |-core.component.ts    //overridded core component and template
            |-core.template.html
|-Modules
   |-Core
      |-Resources
         |-assets
            |-typescript
               |-core
                  |-core.component.ts  //main module component and template
                  |-core.template.html

core.template.html（原文）

<div>
    <p> This is a core component's template</p>
    <button>Click me! </button>
</div>

core.template.html（覆盖）

<div>
    <p> This is a overridden core component's template</p>
    <p> Removed the button and overridden with p-tag </p>
</div>

希望我已经清楚地说明了我面临的问题。

【问题讨论】：

视情况而定，但至少对于其中一些，这可以通过条件导入包含并发组件的 NgModule 来解决。

【参考方案1】：

在 Angular 2 中覆盖整个组件直到一个未解决的问题

信息来自：https://github.com/angular/angular/issues/11144

但是现在你可以使用 Reflect 来改变组件的元数据。

import Component from 'angular2/core'

@Component(
  selector: 'thirdpartycomp',
  providers: [],
  template: `Hello From Third Party App!`,
  directives: []
)
export class ThirdParty

annotations = Reflect.getMetadata('annotations', Thing);
for (let i = 0; i < annotations.length; i += 1) 
  if (annotations[i].constructor.name === 'ComponentMetadata') 
    annotations[i].template = 'Hello From My App!';
    break;
  


@Component(
  selector: 'my-app',
  directives: [ThirdParty],
  template: `<thirdpartycomp></thirdpartycomp>`,
)
export class App