@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有一个选项，但它会导致太多无用的调用。

答案(设置)

当前回答

解决这个问题的另一种方法是手动运行更改检测器。

首先注入ChangeDetectorRef:

constructor(private changeDetector : ChangeDetectorRef) {}

然后在更新控制*ngIf的变量后调用它

show() {
        this.display = true;
        this.changeDetector.detectChanges();
    }

2017-09-04 20:46:22

其他回答

只需确保静态选项设置为false

  @ViewChild('contentPlaceholder', {static: false}) contentPlaceholder: ElementRef;

2020-07-21 11:25:48

如果我在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

正如其他人提到的，最快的解决方案是使用[hidden]而不是*ngIf。采用这种方法，组件将被创建但不可见，因此您可以访问它。这可能不是最有效的方法。

2017-01-29 09:55:57

解决这个问题的另一种方法是手动运行更改检测器。

首先注入ChangeDetectorRef:

constructor(private changeDetector : ChangeDetectorRef) {}

然后在更新控制*ngIf的变量后调用它

show() {
        this.display = true;
        this.changeDetector.detectChanges();
    }

2017-09-04 20:46:22

我认为使用从lodash延迟有很多意义，特别是在我的情况下，我的@ViewChild()是在async管道

2019-06-12 16:10:29

@ViewChild in *ngif

推荐文章

最新文章

标签