哟</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 中覆盖组件时在模板中进行更改的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！