相关疑难解决方法(0)

题

显示模板中相应元素后获取@ViewChild最优雅的方法是什么？以下是一个例子.也有Plunker可用.

模板:

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

零件:

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);
    }
}

我有一个默认隐藏其内容的组件.当有人调用@ViewChild方法时,它变得可见.但是,在角度2变化检测完成之前,我无法参考show().我通常将所有必需的操作包装成viewContainerRef如上所示.有更正确的方法吗？

我知道有一个选项setTimeout(()=>{},1),但它会导致太多无用的通话.

答案(Plunker)

我查看了几个相关的帖子和​​文档,但仍然无法从@ViewChild获得预期的行为.

最终,我正在尝试设置div的滚动位置.此元素不是组件,而是HTML中的普通div.

为了实现这一点,我试图使用@ViewChild来获取我需要的DOM元素,并设置其滚动值.(顺便说一句,如果你知道一个更好的方法来实现这个没有@ViewChild(或jQuery),将非常感谢答案!)

目前,@ ViewChild只返回undefined.经历一些虚拟检查: - 我在AfterViewInit中访问我的元素 - 我没有任何其他指令,如*ngIf或*ngFor在这个元素上.

这是控制器:

import { Component, AfterViewInit, ViewChild, ElementRef } from '@angular/core';

@Component({
    selector: 'portfolio-page',
    templateUrl: './portfolio-page.component.html',
    styleUrls: ['./portfolio-page.component.scss']
})

export class PortfolioPageComponent implements AfterViewInit{
    @ViewChild('gallery-container') galleryContainer: ElementRef;

    ngAfterViewInit(){
        console.log('My element: ' + this.galleryContainer);
    }
}

和模板:

<div id='gallery-container' class='gallery-image-container'>
    <div class='gallery-padding'></div>
    <img class='gallery-image' src='{{ coverPhotoVm }}' />
    <img class='gallery-image' src='{{ imagepath }}' *ngFor='let imagepath of imagesVm' />
</div>

我的输出很简单:我的元素:未定义.

如您所见,我目前正在尝试按ID访问元素,但也尝试过类名.任何人都可以提供有关ViewChild选择器查询期望的更多详细信息吗？

我还看到了一个示例,其中散列'#'用作@ViewChild使用的选择器标识符 - 但是这会导致我使用#gallery-container导致模板解析错误.

我想不出任何可能在这里错误的事情.感谢所有帮助,谢谢!

完整代码可在此处获取:https://github.com/aconfee/KimbyArting/tree/master/client/KimbyArting/components/portfolio-page

我正在尝试在更新表中使用的数据后刷新我的Angular Table.

文档说"你可以通过调用renderRows()方法触发对表的渲染行的更新." 但它不像普通的子组件,我可以使用"@ViewChild(MatSort)排序:MatSort;" 因为我不导入它.

如果我导入它并尝试类似@ViewChild('myTable')myTable:MatTableModule; 然后我收到一个错误,指出renderRows()在该类型上不存在.

我怎么称呼这种方法？谢谢!

我的表格代码片段:

<mat-table #table [dataSource]="dataSource" myTable class="dataTable">

我知道之前已经问过这个问题,但是没有一个选定的答案对我有用.

我正在尝试使用@ViewChild从dom中获取我的ng-select.它总是返回undefined

这是main.html里面的选择

  <ng-select id="user-select" 
             #userSelect 
             [allowClear]="true"
             [items]="singleSignOnUsers"
             [disabled]="disabled"
             placeholder="No user selected">
            </ng-select>

这是我的组件

import { Component, AfterViewInit, ViewChild  } from '@angular/core';

@Component({
    moduleId: module.id,
    selector: 'app-main',
    templateUrl: '../app/main.html',
    providers: [ApiHttpService, UserAdministrationService]
})

export class AppComponent {
      @ViewChild('userSelect') userSelect;


        ngAfterViewInit() {
           alert(this.userSelect);
        }
}

我在这里失踪了什么？

更新:哦,我的灵魂!我想出了为什么这不应该工作时...我将整个视图包含在带有ngSwitch的div中.如果我把它移出......我可以访问它们.现在我不知道如何在ngSwitch中访问它们.但我不必使用ngSwitch

<div [ngSwitch]='loading'>
        <div *ngSwitchCase="false">
            ...
            <ng-select id="user-select"
                       #userSelect
                       [allowClear]="true"
                       [items]="singleSignOnUsers"
                       [disabled]="disabled"
                       placeholder="No city selected">
            </ng-select>
            ...
        </div>
    <div

当有条件地加载子项的模板中有ngIf时,是否可以识别Angular2组件(此处为AppComponent)是否已完全加载(包括ViewChilds).

参考:Angular 2 @ViewChild注释返回undefined 此示例取自上面的引用.感谢kenecaswell

import {Component, ViewChild, OnInit, AfterViewInit} from 'angular2/core';
import {ControlsComponent} from './child-component-1';
import {SlideshowComponent} from './slideshow/slideshow.component';

@Component({
    selector: 'app',
    template:  `
        <div *ngIf="controlsOn">
            <controls ></controls>
            <slideshow></slideshow>
        </div>
    `,
    directives: [SlideshowComponent, ControlsComponent]
})

export class AppComponent {
    @ViewChild(ControlsComponent) controls:ControlsComponent;   
    @ViewChild(SlideshowComponent) slide:SlideshowComponent;

    controlsOn:boolean = false;

    ngOnInit() {
        console.log('on init', this.controls);
        // this returns undefined
    }

    ngAfterViewInit() {
        console.log('on after view init', this.controls);
        // this returns null
    }

}

由于ngIf条件,在加载子组件之前触发ngOnInit && ngAfterViewInit

我需要在加载SlideshowComponent和ControlsComponent时识别并基于此执行操作.

我有一个hacky解决方案,当有多个ViewChild(不同类型)时不适合 - 使用事件发射器通知子加载的时间.

我发布这个问题,因为经过数小时的研究后没有适当的解决方案.

在我的 Angular 应用程序中，我的 @ViewChild 实例无法填充 HTL matSort。

我的组件.ts：

import { MatSort } from '@angular/material';

export class MyClassComponent {
     @ViewChild(MatSort) sort: MatSort;

}

ngOnInit() {
    console.log(this.sort); // undefined
}

我的组件.html：

<mat-table #table [dataSource]="dataSource" matSort>
           .......................................................
           .......................................................

</mat-table>

我需要使用 matSort 中的 sortChange 但它总是返回未定义。

我已经检查了这个问题的其他答案,但到目前为止似乎没什么帮助.我正试图在离子2 app中显示地图.但是当我尝试选择#mapdiv时,它会返回undefined.这是代码

page1.html <div id="map" #mapDiv style="height:380px;"></div>

page1.ts

import { Component, AfterViewInit, ViewChild, ElementRef } from '@angular/core';

import { NavController } from 'ionic-angular';

declare var google;

@Component({
  selector: 'page-page1',
  templateUrl: 'page1.html',
})
export class Page1 implements AfterViewInit {
    @ViewChild('mapDiv') mapDiv:ElementRef;
    map;
    t;

  constructor(public navCtrl: NavController) {
    this.initMap();
  }

  ngAfterViewInit(){
    console.log('My element: ' + this.mapDiv);
  }

  initMap()
  {
     this.map = new google.maps.Map(this.mapDiv.nativeElement,  {  
                  center:  new  google.maps.LatLng(51.505,  -0.09),  
                  mapTypeId:  google.maps.MapTypeId.ROADMAP,  
                  zoom:  11  
              });  

    this.t = new Date().getTime();  
      var  waqiMapOverlay  = …

编写了一个 Angular 13 组件，每当窗口大小调整时，它都会在 div 中绘制一些内容。

问题是获取 div 的渲染宽度。如果我不使用 setTimeout() 并延迟 170 毫秒，this.treemap.nativeElement.offsetWidth则为零。

由于树形图必须在每次调整窗口大小时重新渲染，我还尝试从 ngAfterViewInit() 调度窗口调整大小事件，但它似乎也发生得太快（所以再次this.treemap.nativeElement.offsetWidth为零）。

模板的相关部分...

  <div #treemap class="treemap col-12"></div>

和缩写代码...

// Details omitted for brevity
export class TreemapComponent implements AfterViewInit {
  @ViewChild('treemap') treemap!: ElementRef

  @HostListener('window:resize', ['$event'])
  private render() {
    const width = this.treemap.nativeElement.offsetWidth
    // code that successfully renders a treemap in the div as long as width != 0
  }

  callHack(): void {
    setTimeout(() => this.render(), 170) // testing shows 170ms is lowest possible …