@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上设置tabindex的情况

html:

<div #countryConditional1 *ngIf="country=='USA'">                        
  <input id="streetNumber" [(ngModel)]="streetNumber" pInputText>
</div>

ts:

@ViewChild('countryConditional1') set countryConditional1(element) {
  if (element) {
    const container2 = document.querySelector("#someElement");
    container2.querySelector("span > input").setAttribute("tabindex", "18");
  }

2022-04-14 14:08:08

其他回答

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

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

2020-07-21 11:25:48

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

首先注入ChangeDetectorRef:

constructor(private changeDetector : ChangeDetectorRef) {}

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

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

2017-09-04 20:46:22

我自己在使用Angular 10时也遇到了同样的问题。

如果我尝试使用[hidden]或*ngIf，那么@ViewChild变量总是未定义的。

<p-calendar #calendar *ngIf="bShowCalendar" >
</p-calendar>

我没有把它从网页上删除。我使用了一个[ngClass]使控件的透明度为:0，并将它完全移开。

<style>
  .notVisible {
    opacity: 0;
    left: -1000px;
    position: absolute !important;
  }
</style>

<p-calendar #calendar [ngClass]="{'notVisible': bShowCalendar }" >
</p-calendar>

我知道，这很蠢很丑，但它解决了问题。

我还必须让控制变成静态的。我不明白为什么…但是，再一次，它拒绝在没有改变的情况下工作:

export class DatePickerCellRenderer {
    @ViewChild('calendar', {static: true }) calendar: Calendar;

2021-01-28 14:11:34

在我的例子中，我只需要在模板中存在div时加载整个模块，这意味着出口在ngif中。这样，每当angular检测到#geolocalisationOutlet元素时，它就会在其中创建一个组件。该模块也只加载一次。

constructor(
    public wlService: WhitelabelService,
    public lmService: LeftMenuService,
    private loader: NgModuleFactoryLoader,
    private injector: Injector
) {
}

@ViewChild('geolocalisationOutlet', {read: ViewContainerRef}) set geolocalisation(geolocalisationOutlet: ViewContainerRef) {
    const path = 'src/app/components/engine/sections/geolocalisation/geolocalisation.module#GeolocalisationModule';
    this.loader.load(path).then((moduleFactory: NgModuleFactory<any>) => {
        const moduleRef = moduleFactory.create(this.injector);
        const compFactory = moduleRef.componentFactoryResolver
            .resolveComponentFactory(GeolocalisationComponent);
        if (geolocalisationOutlet && geolocalisationOutlet.length === 0) {
            geolocalisationOutlet.createComponent(compFactory);
        }
    });
}

<div *ngIf="section === 'geolocalisation'" id="geolocalisation">
     <div #geolocalisationOutlet></div>
</div>

2019-03-12 13:27:58

上面的答案并不适用于我，因为在我的项目中，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

@ViewChild in *ngif

推荐文章

最新文章

标签