Кто то может подробно прокомментировать данный TypeScript код?

Question

[User .]

Слабо разбираюсь в Angular нужно понять что делает именно данный код, кто может подробно и понятно прокомментировать ?

@Component({
  selector: 'app-show-j',
  templateUrl: './show.component.html',
  styleUrls: ['./show.component.scss']
})
export class ShowComponentJ implements OnInit {
  @Input() 
  currentJobs: any[];

  public urlpdf: string = environment.routes.host + environment.routes.jobs + '/pdf';

  currentCheckedInputs: Set<HTMLInputElement> = new Set()
//Отправляемые(выходные) данные в компонент родителя
  @Output() 
  onDelete: EventEmitter<number[]> = new EventEmitter();

//возвращаем наш список чек лист
  @ViewChildren('checkedJobs')
  checkedJobs: QueryList<HTMLInputElement>

//привязываем событие  change к нашему методу osSelect
  @HostListener('change', ['$event.target'])
  onSelect(target){
    this.checkedJobs.forEach((elem: any)=>{
      // console.log(elem.nativeElement.checked , target)
      if(elem.nativeElement.checked && elem.nativeElement == target){
         this.currentCheckedInputs.add(elem)
      }else if( !elem.nativeElement.checked){
        this.currentCheckedInputs.delete(elem)
      }
    })
    let arrId = [];
    this.currentCheckedInputs.forEach((elem: any)=>{
      arrId.push(+elem.nativeElement.id)
    })
    this.onDelete.emit(arrId)
    
  }
  constructor(private router: Router) { }

  ngOnInit() {
  }

}

Answer 1

[Pavel Pikat]

Выглядит как дочерний компонент какого-то другого компонента, т.е. используется внутри чего-то. Я бы сказал что задача этого компонента - отрендерить список задач из передаваемой переменной currentJobs (у которой сверху декоратор @Input() - это входные данные). Рендерится все в шаблоне show.component.html.

@HostListener('change', ['$event.target']) - это eventListener по всему компоненту, т.е. клик в любом месте внутри компонента вызовет эту функцию. Эта функия пробегается по всем элементам в checkedJobs (список чекбоксов в шаблоне) и проверяет, отмечены ли они или нет. Если да - добавляет чекбокс в отдельный Set (это типо Array но с униками) currentCheckedInputs, а если не отмечен - удаляет. После этого пробегается уже по currentCheckedInputs, собирает айди HTML элементов и передает родительскому компоненту через this.onDelete.emit. Родительский компонент скорее всего слушает это событие и что-то дальше делает с полученной инфой.

Ротительский компонент скорее всего содержит такую конструкцию у себя в шаблоне:

<app-show-j [currentJobs]="jobs" (onDelete)="handleDeleted($event)"></app-show-j>

Comments

[User .]

Спасибо!!