Angular6 @ViewChild не определено с помощью ngIf - PullRequest
Новая
       7

Angular6 @ViewChild не определено с помощью ngIf

2 голосов
/ 10 апреля 2019

У меня проблема с использованием @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 .fillTable();
}

, но это не решило мою проблему.Любое предложение?

Ответы [ 2 ]

1 голос
/ 10 апреля 2019

Попробуйте запустить обнаружение изменений между ними, чтобы убедиться, что шаблон DOM читает DOM после изменения сброса.

В шаблоне: 

<first-child #firstChild *ngIf="showFirtChild"></first-child>

В контроллере: 

import { ChangeDetectorRef } from '@angular/core';

export class exampleClass implements 
{

@ViewChild('firstChild') public firstChildComp: MyFirstChildComponent;
public fcomp: any;
public showFirtChild: boolean;

constructor(private ref: ChangeDetectorRef,
            //your services) {}

ngAfterViewInit() 
{
    this.showFirtChild = true;
    this.ref.detectChanges();

    this.fcomp = this.firstChildComp;
}

public reset(): void 
{
    this.fcomp.fillTable();
}

Документация ChangeDetectorRef для дальнейшего чтения.

1 голос
/ 10 апреля 2019

ngIf удалит ваш компонент из DOM. Так что это становится неопределенным. Если вместо этого вы используете [hidden]="!showFirstChild", оно будет скрыто и будет доступно в компоненте.

Вот стек стека , где вы можете проверить это.

...