Для чего в TypeScript служат декораторы input и output?

Question

[User .]

Не уверен, что верно понимаю, для чего поля в компонентах помечаются с помощью данных декораторов @input и @output. Насколько я понял, таким образом устанавливается связь между родительским компонентом и дочерним.

Comments

[Алексей Ярков]

Декоратор Руслан? =)
Вы укажите контекст, в котором видели использование этих декораторов. Приведите пример.

[User .]

Исправил, ниже пример)

@Component({
  selector: 'app-operations-jobs',
  templateUrl: './operations-jobs.component.html',
  styleUrls: ['./operations-jobs.component.scss']
})
export class OperationsJobsComponent implements OnInit {
  addJobForm: FormGroup;
  @Input()
  currentIdForDelete: number[];


  //инизиц. событие
  @Output()
  addJob: EventEmitter<any> = new EventEmitter()

  @Output()
  deleteJob: EventEmitter<any> = new EventEmitter()
  currentRole: string;
  cveArr: Array<number> = [3,4,5,6,7,8,9,10];

  constructor(
    private  fb:FormBuilder,
    private dataService: DataService,
    private authService: AuthService
    ) { }

  ngOnInit() {
    this.buildForm();
    this.authService.role
      .subscribe((role)=>{
        this.currentRole = role; 
      })
  }

  buildForm(){
    this.addJobForm = this.fb.group(
      { ip:["67.59.156.250/24", Validators.required],
        port:["21 22 80 445", Validators.required],
        rate:["200", Validators.required],
        parsetype:["2", Validators.required],
        jobname:["I like this", Validators.required],
        jobdescribe:["Additional Info", Validators.required],
        apipython:["127.0.0.1", Validators.required],
        "cve-score": [this.cveArr[1], Validators.required],
      }
    );
  }

  sendData(form){
    this.dataService.addJob(form.value)
      .subscribe(
        (data)=>{
          console.log(data);
          if(data){
            //вызов у родителя
            this.addJob.emit(data)
          }
        },
        (error)=>{
          console.log(error);      
        }
      )
    
  }
  deletUsers(){
    console.log(this.currentIdForDelete)
    if(this.currentIdForDelete){
      this.currentIdForDelete.forEach((elemId)=>{
        this.dataService.deleteJobs(elemId)
          .subscribe(
            (res:any)=>{
                 if(res.status == 200){
                  this.deleteJob.emit(res.id)
              }},
            (err)=>{console.log(err)}
          )
      })
    }
  }
}

Answer 1

[0xD34F]

Мда-а-а-а... Если раньше некомпетентность было благоприлично проявлять путём неразличения javascript и jquery, то теперь, как видно, настала очередь typescript и angular. Типа прогресс.

https://v7.angular.io/guide/template-syntax#input-...
https://v7.angular.io/api/core/Input
https://v7.angular.io/api/core/Output