Angular 角度分割HTML文件

我知道这个问题已经讨论过了，但我的问题如下：

我有一个包含许多函数的组件，这个组件应该根据它接收的参数显示不同的HTML。我的问题是我的HTML文件太大，我想把它分成两个文件

我不想做这样的事情：

<div *ngIf="myParam1">
500 line
</div>
<div *ngIf="myParam2">
500 line
</div>

500线
500线

angularJS的

ng include

指令非常完美，但现在看来唯一的方法是创建两个组件。但我不想这样做，因为我将在两个组件中复制主组件的所有功能。（我可以保留主组件并将所有内容传递给子组件，但是要传递的内容太多了，编写这样的代码太可怕了）

---

我的问题是，当需要两个html模板时，是否有一种解决方法来避免typescript重复？因为如果没有解决办法，听起来很疯狂。。我不知道他们为什么要删除ng include：/

为什么不制作2个组件，然后只让它们具有代表性。当发生交互时，您可以使用子组件的Output（）事件，在父组件上调用一个函数，这样您就可以在子组件之间共享父组件上的函数逻辑，避免逻辑重复

举个例子

儿童

TS

@Output() event = new EventEmitter<any>;
@Input() button_name: any;

emitEvent() {
    this.event.emit();
}

changeButtonName() {
    // could modify data here for example to update the child component.
    this.button_name = "Changed value of name";

}

HTML

<button (click)="emitEvent()">{{button_name}}</button>

<child-component *ngIf="myParam1" (event)="changeButtonName()" [button_name]="button_name"></child-component>

<child-component2 *ngIf="myParam2" (event)="changeButtonName()" [button_name]="button_name"></child-component>

查看

ngTemplateOutlet

指令。它应该做你想做的。但最佳实践解决方案肯定是具有独立组件的解决方案，您可以像sam建议的那样，从服务或父组件中提取公共逻辑