angular - 如何访问 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

我有同样的问题，一个简单的解决方法是设置 destroyOnHide input 属性设置为 false，这样可以防止选项卡在隐藏时被破坏。

<ngb-tabset [destroyOnHide]="false">
  ...
</ngb-tabset>