laravel – Angular 2覆盖组件

发布时间：2020-12-17 18:05:38 所属栏目：安全来源：网络整理

我来自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>

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

解决方法

覆盖组件的teamplete直到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 {}

（编辑：李大同）

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