标签: viewchild

我应该如何配置新的Angular 8视图子级？

@ViewChild('searchText', {read: ElementRef, static: false})
public searchTextInput: ElementRef;

与

@ViewChild('searchText', {read: ElementRef, static: true})
public searchTextInput: ElementRef;

哪个更好？什么时候应该使用static:truevs static:false？

我查看了几个相关的帖子和​​文档,但仍然无法从@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

我正在尝试访问本机元素,以便在单击另一个元素时专注于它(非常类似于html属性"for" - 因为不能在此类型的元素上使用.

但是我得到错误:

TypeError:无法读取未定义的属性"nativeElement"

我尝试console.log中的nativeElement,ngAfterViewInit()以便它被加载,但它仍然会抛出错误.

我还在click事件处理程序中访问nativeElement,这样我可以在单击另一个元素时聚焦该元素 - 这可能是什么在混淆它,因为它在视图加载之前编译？

例如:

ngAfterViewInit() {
    console.log(this.keywordsInput.nativeElement); // throws an error
}

focusKeywordsInput(){
    this.keywordsInput.nativeElement.focus();
}

完整代码:

正在使用的html模板的相关部分:

<div id="keywords-button" class="form-group" (click)="focusKeywordsInput()">
    <input formControlName="keywords" id="keywords-input" placeholder="KEYWORDS (optional)"/>
    <div class="form-control-icon" id="keywords-icon"></div>
</div>

component.ts:

import { Component, OnInit, AfterViewInit, ViewChild, ElementRef } from '@angular/core';
import {  REACTIVE_FORM_DIRECTIVES, 
          FormGroup, 
          FormBuilder, 
          Validators,
          ControlValueAccessor
        } from '@angular/forms';
import { NumberPickerComponent } from './number-picker.component';
import { DistanceUnitsComponent } from './distance-units.component';
import { MapDemoComponent } from '../shared/map-demo.component';
import { AreaComponent …

我正在使用ViewChild，如下所示：

@ViewChild("InternalMedia") localStream;
@ViewChild("emoji") mEmoji;

一直工作到angular-7.x

我将其升级到angular-8.x后，就开始出现以下错误

.../call_emoji/component.ts(41,4): error TS2554: Expected 2 arguments, but got 1.

我检查了https://angular.io/api/core/ViewChild，并将其更改为

@ViewChild("InternalMedia",{static:false}) remoteStream;

有用。我没有得到什么静态效果，像以前一样工作应该有什么价值？

我在使用 @ViewChild 和通过 ngIf 显示的组件时遇到问题。我找到了各种解决方案，但没有一个对我有用。这是我的主要组件，包括多个步骤（为了简洁起见，我在代码中只显示了 2 个），一个用于向前导航的按钮和一个用于重置第一步返回的组件的按钮。第一步显示在页面打开：

...
<div class="my-container">
    <first-child *ngIf="showFirtChild"></first-child>
    <second-child *ngIf="showSecondChild"></second-child>
</div>
<button (click)="goToNextStep()"></button>
<button (click)="reset()"></button>
...

export class MainComponent implements OnInit {
    @ViewChild(FirstChild) private firstChildComp: MyFirstChildComponent;
    showFirtChild: boolean = true;

    ngOnInit() {
        //here firstChildComp is defined
    }

    //code for navigate through steps
    reset() {
        this.showFirtChild= true;
        this.firstChildComp.fillTable(); //fillTable is a function defined in MyFirstChildComponent
    }
...
}

在步骤导航期间，对 firstChildComp 的引用丢失，并且在调用 reset() 时，childComp 结果未定义。我知道原因是 ngIf，所以我尝试使用 ngAfterViewInit：

ngAfterViewInit() {
    this.fcomp = this.firstChildComp;
}

reset() {
        this.showFirtChild= true;
        this.fcomp …

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

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

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

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

我的表格代码片段:

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

我是Angular2的新手.在我看来,我有几个相同的孩子在*ngFor中生成.

<ngb-panel *ngFor="let client of clients" [title]="'Client #' + client.id">
    <template ngbPanelContent>
        <processing-item [client]="client"></processing-item>
    </template>
</ngb-panel>

我需要在父元素中调用这些组件的方法并找出ViewChildren装饰器,代码是:

@ViewChildren(ProcessingItemComponent) processingItems: QueryList<ProcessingItemComponent>;

然后我尝试通过forEach迭代它们:

ngAfterViewInit() {
    this.processingItems.forEach(function (el) {
        console.log(el);
    });
}

但它没有任何作用.在QueryList上调用的toArray()方法返回空数组.

任何建议如何一次获取所有子组件并调用其方法？

我正在使用 *ngFor 创建一堆 div。我想把手放在其中一个上并获得它的宽度。

.html
<div #elReference *ngFor="let el of elements> HEHE </div>

.ts
  @ViewChild("elReference") elReference: ElementRef;

显然，您不能将 ViewChild 与 *ngFor 一起使用，因为它elReference仍未定义。

你如何获得使用 *ngFor 创建的元素引用？

我有一个指令,我想在多个模块中使用它.在每个模块上声明它会产生错误.因此,我尝试在共享模块中声明它并将此共享模块导入其他模块.但是,它没有用.它仅在组件自己的模块上准确声明时才有效.

这是我的SharedModule:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { GeneralDataService } from './general-data.service';
import {ModalDirective} from '../directives/modal.directive';

    @NgModule({
      imports: [
        CommonModule
      ],
      providers: [GeneralDataService],
      declarations: [ModalDirective]
    })
    export class SharedModule { }

我想要使​​用的模块ModalDirective:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { MyComponent } from './patient.component';
import {SharedModule} from '../shared/shared.module';
@NgModule({
  imports: [
    CommonModule,
    SharedModule
  ],
  providers: [  ],
  declarations: [ MyComponent ]
}) …

我正在尝试使用ViewChild获取子组件的元素,但无法找到实现此目的的方法.

我们在模板中说:

...
<some-comp #someComp></some-comp>
...

并获得此参考:

import { SomeComponent } from './some-comp/some-comp.component';
...
@ViewChild('someComp') someComp: SomeComponent;
...
ngOnInit() {
// this.someComp.nativeElement? <-- how to get nativeElement?
}

我试图这样做的原因是通过使用scrollToHTMLElement的函数自动滚动到该子组件的位置来将视图集中到该子组件.(请参阅如何在单击时将元素滚动到视图中)

我可以通过给那个子组件提供id并使用document.getElementById()来检索它,但我想知道是否有办法使用模板引用变量或任何角度方式来执行此操作.

提前致谢!