问题
We have a Component with Typescript business logic, and then Html formatting. The marketing department wants to create a different html format/orientation, with Same Business logic.
To extend the Same business Typescript logic, we are utilizing Inheritance and extends as quick and easy way.
For html formatting, say Div A, Div B, Div C, will be arranged in different orders and formats, with some additional changes . We have NgTemplate and NgTemplateOutlets for each Div defined in the original Component.
When trying to invoke utilize the ngTemplate Outlets in the inheritance component, we are noticing they are not showing.
Question is, how do I share ng-template Outlets to the new Inheritance Component?
Original Typescript
export class OriginalClass {
Original Component html:
<ng-container *ngTemplateOutlet = "templateref1"></ng-container>
<ng-container *ngTemplateOutlet = "templateref2"></ng-container>
// they are defined in bottom of html here
<ng-template #templateref1>
hello
<ng-template>
<ng-template #templateref1>
hello2
<ng-template>
New Typescript class Inheritance :
export class NewClass extends OriginalClass {
New Component html: trying to call ng-templates without redefining them
<ng-container *ngTemplateOutlet = "templateref2"></ng-container>
<ng-container *ngTemplateOutlet = "templateref1"></ng-container>
来源：https://stackoverflow.com/questions/59556065/how-to-copy-ngtemplate-and-ngtemplate-outlet-with-inheritance-or-something-else