时间戳

首页 > 解决方案 > 如何以角度访问父函数？

angular - 如何以角度访问父函数？

问题描述

我有一个表单组件，当提交时，它会插入到数据库中。而且我需要重新列出数据库中更改的数据。该列表方法可在另一个组件中找到。我尝试使用 viewChild 来调用这些函数，但是当我提交时 ViewChild 显示为未定义。

这是在 html 中列出数据的数据组件

    export class DataComponent implements OnInit{  
      constructor(private dataService: DataService,private router:Router) {
            this.getData();
           }
        
          ngOnInit(): void {
          }
          getData(){
            this.dataService.getData().subscribe(
              resp => this.data = resp,
              error =>console.log(error)
            );
          }
          detail(id: number){
            this.router.navigate(['data/check' + id]);
          }
}

这就是表单的 checkComponent。

export class CheckComponent implements OnInit,AfterViewInit {
      form: FormGroup;
      data: any = [];
      id: number;
      @ViewChildren(DataComponent) dataComponent: DataComponent ;
      constructor(
        private formBuilder: FormBuilder,
        private router: Router,
        private route: ActivatedRoute,
        private dataService: DataService
      ) {
         this.id = parseInt(this.route.snapshot.paramMap.get('id'));
          this.Service.getReporte(this.id).subscribe(
            (resp: any) => this.data = resp,
            (error) => console.log(error)
          );
        }
      }
      ngOnInit(): void {
        this.makeForm();
      }
     makeForm() {
        this.form = this.formBuilder.group({
          ...
        });
      }
    
    sendData() {
        const data = {
                  ...    
         };
          this.dataService.createData(data).subscribe(
            (resp) => console.log(resp),
            (error) => console.log(error)
          );
          this.dataComponent.getData(); //undefined
          this.router.navigate(['data']);
        }
    
      }

除了 ViewChild 有没有办法调用另一个组件的功能？还是我执行错了？我需要访问DataComponent的函数getData()

标签： angulartypescript

解决方案

如果 DataComponent 是 CheckComponent 的子级，我的建议是使用自上而下的方法/单向数据绑定到数据流。那是：

  • 在 CheckComponent 的属性中跟踪主要数据对象
  • 在接受主数据对象的 DataComponent 上添加一个输入。

当 CheckComponent 上的数据更新时，会发生更改检测。这会将更新的数据 DOWN 传递给 DataComponent，后者将自动更新其视图。

这是您要实现的目标的正确方法。

推荐阅读