@ViewChild in *ngif

问题

在模板中显示相应的元素后获得@ViewChild的最优雅的方式是什么?

下面是一个例子。也可提供活塞。

Component.template.html:

<div id="layout" *ngIf="display">
  <div #contentPlaceholder></div>
</div>

Component.component.ts:

export class AppComponent {

    display = false;
    @ViewChild('contentPlaceholder', { read: ViewContainerRef }) viewContainerRef;

    show() {
        this.display = true;
        console.log(this.viewContainerRef); // undefined
        setTimeout(() => {
            console.log(this.viewContainerRef); // OK
        }, 1);
    }
}

我有一个默认隐藏其内容的组件。当有人调用show()方法时，它变得可见。然而，在Angular 2变更检测完成之前，我不能引用viewContainerRef。如上所示，我通常将所有必需的操作包装到setTimeout(()=>{}，1)中。有没有更正确的方法?

我知道ngAfterViewChecked有一个选项，但它会导致太多无用的调用。

答案(设置)

当前回答

上面的答案并不适用于我，因为在我的项目中，ngIf是在一个输入元素上。我需要访问nativeElement属性，以便在ngIf为真时专注于输入。在ViewContainerRef上似乎没有nativeElement属性。以下是我所做的(遵循@ViewChild文档):

<button (click)='showAsset()'>Add Asset</button>
<div *ngIf='showAssetInput'>
    <input #assetInput />
</div>

...

private assetInputElRef:ElementRef;
@ViewChild('assetInput') set assetInput(elRef: ElementRef) {
    this.assetInputElRef = elRef;
}

...

showAsset() {
    this.showAssetInput = true;
    setTimeout(() => { this.assetInputElRef.nativeElement.focus(); });
}

我在聚焦之前使用了setTimeout，因为ViewChild需要一秒来分配。否则就没有定义了。

2017-04-25 22:53:31

其他回答

另一个快速的“技巧”(简单的解决方案)是使用[hidden]标签而不是*ngIf，重要的是要知道，在这种情况下，Angular会构建对象并在类下绘制它:隐藏，这就是ViewChild工作没有问题的原因。所以重要的是要记住，你不应该在沉重或昂贵的物品上使用隐藏，这会导致性能问题

  <div class="addTable" [hidden]="CONDITION">

2019-01-12 17:19:01

如果我在Angular 9中使用ChangeDetectorRef，它就可以工作

@ViewChild('search', {static: false})
public searchElementRef: ElementRef;

constructor(private changeDetector: ChangeDetectorRef) {}

//then call this when this.display = true;
show() {
   this.display = true;
   this.changeDetector.detectChanges();
}

2020-05-12 04:36:54

这可能有用，但我不知道这对你的情况是否方便:

@ViewChildren('contentPlaceholder', {read: ViewContainerRef}) viewContainerRefs: QueryList;

ngAfterViewInit() {
 this.viewContainerRefs.changes.subscribe(item => {
   if(this.viewContainerRefs.toArray().length) {
     // shown
   }
 })
}

2016-09-07 10:21:21

确保将参数{static: false}传递给@ViewChild可以解决这个问题。

template.html代码

<div *ngIf="showFirtChild">
  <first-child #firstchildComponent ></first-child>
</div>

在.ts文件

export class Parent implements {
  private firstChild: FirstchildComponent;

  @ViewChild('firstchildComponent', { static: false }) set content(content: 
  FirstchildComponent) {
     if(content) { 
          this.firstchildComponent = content;
     }
  }

  ShowChild(){
     this.showFirtChild = true;
     if(this.firstchildComponent){
        this.firstchildComponent.YourMethod()
     }
  }
}

2022-05-20 13:59:47

<button (click)='showAsset()'>Add Asset</button>
<div *ngIf='showAssetInput'>
    <input #assetInput />
</div>

...

private assetInputElRef:ElementRef;
@ViewChild('assetInput') set assetInput(elRef: ElementRef) {
    this.assetInputElRef = elRef;
}

...

showAsset() {
    this.showAssetInput = true;
    setTimeout(() => { this.assetInputElRef.nativeElement.focus(); });
}

我在聚焦之前使用了setTimeout，因为ViewChild需要一秒来分配。否则就没有定义了。

2017-04-25 22:53:31

@ViewChild in *ngif

推荐文章

最新文章

标签