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

问题描述

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

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.

@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

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]
...

我们可以看到，如果我更改component-a.html，则不会影响componentA2.

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

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

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.

类似

@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

component-a.component.html

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

componentA的结果模板:

Resulting template for componentA:

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

componentA2的结果模板:

Resulting template for componentA2:

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

我的表情

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

What I've looked

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

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

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:仍需要以某种方式传递模板吗?(也许这是我需要的，但不确定如何使用)

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屋！