@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

其他回答

我的目标是避免任何假定的方法(例如setTimeout)，我最终实现了接受的解决方案，上面有一点RxJS的味道:

  private ngUnsubscribe = new Subject();
  private tabSetInitialized = new Subject();
  public tabSet: TabsetComponent;
  @ViewChild('tabSet') set setTabSet(tabset: TabsetComponent) {
    if (!!tabSet) {
      this.tabSet = tabSet;
      this.tabSetInitialized.next();
    }
  }

  ngOnInit() {
    combineLatest(
      this.route.queryParams,
      this.tabSetInitialized
    ).pipe(
      takeUntil(this.ngUnsubscribe)
    ).subscribe(([queryParams, isTabSetInitialized]) => {
      let tab = [undefined, 'translate', 'versions'].indexOf(queryParams['view']);
      this.tabSet.tabs[tab > -1 ? tab : 0].active = true;
    });
  }

我的场景:我想根据路由器queryParams在@ViewChild元素上触发一个动作。由于在HTTP请求返回数据之前包装*ngIf为false， @ViewChild元素的初始化发生延迟。

它是如何工作的:只有当每个提供的可观察对象在订阅了combineLatest后发出第一个值时，combineLatest才第一次发出一个值。当@ViewChild元素被设置时，我的Subject tabSetInitialized会发出一个值。因此，我延迟了订阅下代码的执行，直到*ngIf变为正数，@ViewChild被初始化。

当然，不要忘记取消订阅ngOnDestroy，我使用ngUnsubscribe主题:

  ngOnDestroy() {
    this.ngUnsubscribe.next();
    this.ngUnsubscribe.complete();
  }

2018-05-23 18:59:23

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

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

2019-01-12 17:19:01

简化版，我在使用谷歌Maps JS SDK时遇到了类似的问题。

我的解决方案是将divand ViewChild提取到它自己的子组件中，当在父组件中使用时，可以使用*ngIf隐藏/显示。

之前

HomePageComponent模板

<div *ngIf="showMap">
  <div #map id="map" class="map-container"></div>
</div>

HomePageComponent组件

@ViewChild('map') public mapElement: ElementRef; 

public ionViewDidLoad() {
    this.loadMap();
});

private loadMap() {

  const latLng = new google.maps.LatLng(-1234, 4567);
  const mapOptions = {
    center: latLng,
    zoom: 15,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
  };
   this.map = new google.maps.Map(this.mapElement.nativeElement, mapOptions);
}

public toggleMap() {
  this.showMap = !this.showMap;
 }

后

MapComponent模板

 <div>
  <div #map id="map" class="map-container"></div>
</div>

MapComponent组件

@ViewChild('map') public mapElement: ElementRef; 

public ngOnInit() {
    this.loadMap();
});

private loadMap() {

  const latLng = new google.maps.LatLng(-1234, 4567);
  const mapOptions = {
    center: latLng,
    zoom: 15,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
  };
   this.map = new google.maps.Map(this.mapElement.nativeElement, mapOptions);
}

HomePageComponent模板

<map *ngIf="showMap"></map>

HomePageComponent组件

public toggleMap() {
  this.showMap = !this.showMap;
 }

2018-11-18 13:11:23

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

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

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

2016-09-07 10:21:21

在Angular 8上工作，不需要导入ChangeDector

ngIf允许你不加载元素，避免给你的应用程序增加更多的压力。以下是我如何在没有ChangeDetector的情况下运行它

elem: ElementRef;

@ViewChild('elemOnHTML', {static: false}) set elemOnHTML(elemOnHTML: ElementRef) {
    if (!!elemOnHTML) {
      this.elem = elemOnHTML;
    }
}

然后当我将我的ngIf值更改为true时，我将像这样使用setTimeout让它只等待下一个更改周期:

  this.showElem = true;
  console.log(this.elem); // undefined here
  setTimeout(() => {
    console.log(this.elem); // back here through ViewChild set
    this.elem.do();
  });

这也允许我避免使用任何额外的库或导入。

2019-09-06 01:54:48

@ViewChild in *ngif

推荐文章

最新文章

标签