多个组件的通用 HTML 模板，添加了来自组件的单独代码

Question

在一个应用程序中有一些不同的组件，它们通过使用相同的方式引用通用模板url:

@Component({
  selector: 'JG-Percentage',
  templateUrl: '../../../../htmlStructure/htmlBaseTemplate/TemplateVarlist.component.svg',
  styleUrls: ['./Percentage.component.sass']
})

到目前为止一切顺利，也通过使用 angular 双向绑定：[(ngModel)]='variable.varLabel'.

但现在在某些组件上需要一些额外的小 html 代码，还需要 angular 双向绑定：[(ngModel)]='variable.inputStr'.

如何将添加的 html 代码注入通用模板？或者可以将两个 html 文件关联到一个组件？

感谢您的帮助。

示例显示在https://angulartool.de

Answer 1

How to inject this added html code into the common template? ...

您可以在额外的 HTML 上添加 *ngIf="isCustom"，并根据需要在其中使用 [(ngModel)]。然后在所有使用相同 HTML 模板文件的 Typescript 组件 classes 中，您可以为 isCustom（或任何变量名）使用布尔值属性。 isCustom 对使用附加 HTML 的组件 class 为真，对不使用附加 HTML 的组件为假。

如果您直接在附加的 HTML 上使用 [(ngModel)] 并且万一 Angular 抱怨您不能将 ngModel 与 *ngIf 一起使用（与 *ngFor 的情况一样），您可以将这个额外的 HTML 包装在 ng-container 中，然后在其中添加 *ngIf。

<ng-container *ngIf="isCustom">
  <div [(ngModel)]="variable.inputStr">additional HTML</div>
</ng-container>

... Or may two html files can be related together to one component?

一个 Typescript 组件 class 可以有 只有一个 HTML 文件。两个 HTML 文件不能链接到同一个打字稿组件 class。（虽然样式不是这样，一个组件class可以有多个样式文件）。

Answer 2

是的，一个组件可以有两个 html 模板，方法是添加一个子组件。子组件仅扩展需要第二个模板的组件。

stackblitz上展示了完整的代码示例和注释，相关的扩展组件是No.3。

https://stackblitz.com/edit/angular-ivy-7oeube?file=src%2Fapp%2Fapp.component.ts

多个组件的通用 HTML 模板，添加了来自组件的单独代码

Common HTML template for multiple components with added individual code from component

html

angular