Повторное использование избыточных функций угловой и HTML - PullRequest
Новая
       4

Повторное использование избыточных функций угловой и HTML

0 голосов
/ 11 сентября 2018

У меня есть следующий код:

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);
  }

}

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>

Как видно из приведенного вышекоды, я в основном делаю одинаковые вещи для двух разных входов - treeNode и sliceTreeNode.Я получаю эти два ввода от двух отдельных компонентов.

Как я могу изменить код для достижения лучшего повторного использования?В настоящее время я не могу использовать только одну функцию вместо избыточных функций, потому что они возвращают разные вещи.

Кроме того, как я могу повторно использовать HTML-код?

Любая помощь приветствуется.

1 Ответ

0 голосов
/ 11 сентября 2018

Вы можете написать метод, который принимает TreeNode<string>[] в качестве параметра:

public getSlices(nodes: TreeNode<string>[]) : TreeNode<string>[] { // operate on nodes variable instead of instance's properties ... }

...