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输入属性设置为false，这可以防止标签在被隐藏时被销毁。

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

Answer 2

就我而言，问题与两件事有关：

必须使用ngAfterViewInit而不是ngOninit
ngb-tabset用*ngIf语句包装。更改为[hidden]

P.S对于尝试创建动态组件时遇到此问题的人，这里的代码也适用于该部分：

HTML

  <ngb-tabset type="pills" [orientation]="currentOrientation">
    <div #dynamicComponent></div>
  </ngb-tabset>

TS

 @ViewChild('dynamicComponent', { read: ViewContainerRef })
  public viewContainerRef: ViewContainerRef

 constructor(   
    private _componentFactoryResolver: ComponentFactoryResolver) {
  }

  public ngAfterViewInit(): void {
    const component = this._componentFactoryResolver.resolveComponentFactory(TabComponent)
    const ref = this.viewContainerRef.createComponent(component)
    ref.instance.someValue = 'something'
    ref.changeDetectorRef.detectChanges()
  }

Answer 3

这是因为它们位于<template>标记内。这些元素的创建方式与模板中显示的元素不同。它们在DOM中的实际创建方式取决于<ngb-tab>对传递给它的模板的作用。

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

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

3 个答案: