如何访问 ngb-tab 中的子组件（用于验证目的）

Question

假设有这个模板（用于父组件）

<button ... (click)="Save()">
...
<ngb-tabset [activeId]="selectedTab" #tabs>
  <ngb-tab id="tab1">
    <template ngbTabTitle>tab1</template>
    <template ngbTabContent>
      <child-comp1 #comp1>
      </child-comp1>
    </template>
  </ngb-tab>
  <ngb-tab id="tab2">
    <template ngbTabTitle>tab2</template>
    <template ngbTabContent>
      <child-comp2 #comp2>
      </child-comp2>
    </template>
  </ngb-tab>
  ...
</ngb-tabset>

在每个子组件（child-comp1 ...）中，我有一个表单和带有一些验证的输入。

如何按需从父组件访问子组件的方法，我的意思是这样的：

Save(){
  if(Validate()){
    //Save an object ...
  }
}

Validate(){
  if(!this.comp1.Validate()){
    // Activate tab1
    return false;
  }
  else if(!this.comp2.Validate()){
    // Activate tab2
    return false;
  }
  //...
  return true;      
}

在父组件中，我有：

// imports ...
@Component({ ... })
export class parent implements OnInit {
  @ViewChild(ChildComp) comp1: ChildComp;
  @ViewChild('comp2') comp2;
  @ViewChild('tabs') tabs;
  ...
  Validate(){...}
  Save(){...}
}

comp1并且comp2始终undefined在验证方法中！

tabs 返回一个对象，但我找不到到达子组件的方法！

Answer 1

这是因为它们位于<template>标签内。这些元素的创建方式与模板中显示的不同。它们在 DOM 中实际创建的方式取决于什么<ngb-tab>对其传递到的模板的处理方式。

我认为有必要使用ElementRef.nativeElement.querySelector(...)或类似的代替。