Javascript 重用冗余函数和html

我有以下代码：

rightside.component.ts：

import { Component, Input, ChangeDetectionStrategy, ChangeDetectorRef, Output, EventEmitter } from '@angular/core';
import { DataService } from '../../shared/service/data.service';
import { TreeNode } from '../../shared/dto/TreeNode';

import html from './rightside.component.html';
import css from './rightside.component.css';

@Component({
  selector: 'rightside-component',
  template: html,
  providers: [DataService],
  styles: [css],
  changeDetection: ChangeDetectionStrategy.OnPush
})

export class RightSideComponent {
  @Input() treeNode: TreeNode<string>[];
  @Input() sliceTreeNode: TreeNode<string>[];
  @Output() deselected = new EventEmitter<TreeNode<string>>();

  constructor(private cd: ChangeDetectorRef) {}

  public getSelections() : TreeNode<string>[] {
    if (typeof(this.treeNode) == "undefined" || (this.treeNode) === null) {
      return [];
    }
    return this.treeNode;
  }

  public getSlices() : TreeNode<string>[] {
    if (typeof(this.sliceTreeNode) == "undefined" || (this.sliceTreeNode) === null) {
      return [];
    }
    return this.sliceTreeNode;
  }

  public deselect(item: TreeNode<string>):void {
    this.deselected.emit(item);
  }

}

从'@angular/core'导入{Component，Input，ChangeDetectionStrategy，ChangeDetectorRef，Output，EventEmitter}；
从“../../shared/service/data.service”导入{DataService}；
从“../../shared/dto/TreeNode”导入{TreeNode}；
从“./rightside.component.html”导入html；
从“/rightside.component.css”导入css；
@组成部分({
选择器：'右侧组件'，
模板：html，
提供者：[数据服务]，
样式：[css]，
changeDetection:ChangeDetectionStrategy.OnPush
})
导出类RightSideComponent{
@Input（）树节点：树节点[]；
@Input（）切片树节点：树节点[]；
@Output（）取消选择=新建EventEmitter（）；
构造函数（私有cd:ChangeDetectorRef）{}
公共getSelections（）：TreeNode[]{
if（typeof（this.treeNode）=“undefined”| |（this.treeNode）==null）{
返回[]；
}
返回这个.treeNode；
}
public getSlices（）：TreeNode[]{
if（typeof（this.sliceTreeNode）=“undefined”| |（this.sliceTreeNode）==null）{
返回[]；
}
返回此.sliceTreeNode；
}
公共取消选择（项目：TreeNode）：无效{
此。取消选择。发射（项）；
}
}

rightside.component.html：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<ul class="selection-list">
  <li *ngFor="let item of getSelections()">
    <button class="btn" (click)="deselect(item)" *ngIf="item.selected">
      <i class="fa fa-close"> {{ item.displayName }} </i>
    </button> 
  </li>
</ul>

<ul class="selection-list" >
  <li *ngFor="let item of getSlices()">
    <button class="btn" (click)="deselect(item)" *ngIf="item.selected">
      <i class="fa fa-close"> {{ item.displayName }} </i>
    </button> 
  </li>
</ul>

{{item.displayName}}

正如在上面的代码中所看到的，我基本上对两个不同的输入执行相同的操作-treeNode和sliceTreeNode。我从两个独立的组件获取这两个输入

如何修改代码以实现更好的重用性？我目前不能只使用一个函数来代替冗余函数，因为它们返回不同的东西

另外，如何重用HTML代码

---

非常感谢您的帮助。

您可以编写一个将

树节点[]

作为参数的方法：

公共getSlices（节点：TreeNode[]）：TreeNode[]{
//操作节点变量而不是实例的属性
...
}