在 Angular 中覆盖组件时在模板中进行更改 [英] Make changes in template when overriding a component in Angular

问题描述

问题(Angular 7)

我希望能够在不重写整个模板的情况下修改"被覆盖组件的模板，这意味着它将与其覆盖的组件共享相同的 html 模板.目标是能够自定义组件，并且覆盖组件模板上的任何更改都将直接反映在覆盖组件中.

也许我们可以说我想在两个组件之间共享部分逻辑和模板.

当前实现的示例

@Component({选择器:'组件-a'，templateUrl: './component-a.html'})导出类 ComponentAComponent {构造函数(){}}

@Component({选择器:'组件-a'，templateUrl: './component-a2.html'})导出类 ComponentA2Component 扩展 ComponentAComponent {specificStuff = '我是额外的东西';构造函数(){}}

component-a2.component.html

<预><代码>...[与component-a.component.html开头相同]...<!-- 一些特定的东西，如附加标签、按钮、垫子表单字段--><div>{{ 具体的东西 }}

...[与 component-a.component.html 的结尾相同]...

如我们所见，如果我更改 component-a.html 不会影响 componentA2.

目标

目标是两个组件都使用相同的模板，但最终(编译后的)DOM 会有所不同.我不想用 ngIf 这样做.

所以就像

@Component({选择器:'组件-a'，templateUrl: './component-a.html'})导出类 ComponentAComponent {公共特定的东西；构造函数(){}}

@Component({选择器:'组件-a'，templateUrl: './component-a.html'})导出类 ComponentA2Component 扩展 ComponentAComponent {公共名称 = '世界';public specificStuff = '
你好{{name}} </div>';构造函数(){}}

component-a.component.html

哟</div><ng-template #specificStuff></ng-template><div>再见</div>

componentA 的结果模板:

哟</div><ng-template #specificStuff></ng-template><div>再见</div>

componentA2 的结果模板:

哟</div><ng-template #specificStuff><div>你好{{name}} </div></ng-template><div>再见</div>

我看过什么

innerHTML:不适用于角度插值、指令等.

ngComponentOutlet: 需要创建另一个组件并处理上下文 + 我想避免在组件选择器中包含一个层以避免破坏样式

ngTemplateOutlet: 仍然需要以某种方式传递模板?(也许这是我需要的但不知道如何使用它)

解决方案

根据我的理解，您需要添加一些条件来解决您的问题.您可以在同一个组件中同时使用这两种情况.

或者是否有理由需要两个独立的组件?

您可以执行类似的操作，并继续使用模板来显示特定内容.

哟</div><div *ngIf="yourVariable; else specificStuff">您好，这里没有具体的东西.
<div>再见</div><ng-template #specificStuff><div>你好{{name}} </div></ng-template>

The problem (Angular 7)

I would like to be able to "modify" the template of an overridden component without rewriting the whole template meaning it would share the same html template as the component it overrides. The goal is to be able to customize a component and that any change on the overriden component template would be directly reflected in the overriding component.

Maybe we could say that I want to share part of the logic and template between two components.

Example of current implementation

@Component({
  selector: 'component-a',
  templateUrl: './component-a.html'
})
export class ComponentAComponent {

  constructor() { }
}

@Component({
  selector: 'component-a',
  templateUrl: './component-a2.html'
})
export class ComponentA2Component extends ComponentAComponent {

 specificStuff = 'I am additional stuff';

  constructor() { }
}

component-a2.component.html

...
[ same as beginning of component-a.component.html]
...
<!-- Some specific stuff like an additional label, button, mat form field -->
<div>
  {{ specificStuff }}
</div>
...
[ same as end of component-a.component.html]
...

As we can see, if I change component-a.html it will not affect componentA2.

The goal

The goal would be that both component use the same template but final (compiled) DOM would be different. I do not want to do this with ngIf.

So something like

@Component({
  selector: 'component-a',
  templateUrl: './component-a.html'
})
export class ComponentAComponent {

  public specificStuff;

  constructor() { }
}

@Component({
  selector: 'component-a',
  templateUrl: './component-a.html'
})
export class ComponentA2Component extends ComponentAComponent {

 public name = 'World';
 public specificStuff = '<div> Hello {{name}} </div>';

  constructor() { }
}

component-a.component.html

<div>Yo</div>
<ng-template #specificStuff></ng-template>
<div>Bye</div>

Resulting template for componentA:

<div>Yo</div>
<ng-template #specificStuff></ng-template>
<div>Bye</div>

Resulting template for componentA2:

<div>Yo</div>
<ng-template #specificStuff><div> Hello {{name}} </div></ng-template>
<div>Bye</div>

What I've looked

innerHTML: would not work with angular interpolation, directives, etc.

ngComponentOutlet: would need the creation of another component and dealing with the context + I would like to avoid to include a layer with the component selector to avoid breaking the styling

ngTemplateOutlet: Template would still need to be passed somehow ? ( maybe this is what I need but not sure how to use it)

解决方案

From my understanding what you need is to add some conditionals to solve your problem. You can have both cases in the same component.

Or is there a reason for needing two separate components?

You could do something similar to this and keep using templates to show the specific content.

<div>Yo</div>
<div *ngIf="yourVariable; else specificStuff">
    Hello, there is no specific stuff here.
</div>
<div>Bye</div>

<ng-template #specificStuff><div> Hello {{name}} </div></ng-template>

这篇关于在 Angular 中覆盖组件时在模板中进行更改的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！