5

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

<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返回一个对象，但我找不到到达子组件的方法！

4

3 回答 3

4

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

<ngb-tabset [destroyOnHide]="false">
  ...
</ngb-tabset>
于 2017-09-14T08:51:31.223 回答
2

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

  1. 不得不使用ngAfterViewInit而不是ngOninit
  2. ngb-tabset被声明包裹着*ngIf。变成[hidden]

PS 对于那些在尝试创建动态组件时遇到此问题的人，这里也是该部分的代码：

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()
  }
于 2018-07-24T12:38:33.640 回答
0

这是因为它们在<template>标签内。这些元素不会像模板中显示的那样创建。它们是如何在 DOM 中实际创建的，取决于<ngb-tab>传递给它的模板的作用。

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

于 2016-09-06T07:26:29.567 回答