Функция в родительском компоненте не вызывается?

Question

Привет, у меня есть следующий код в этом компоненте:

<app-steps #appSteps
           [menuSteps]="steps"
           [currentComponent]="outlet?.component"
           (currentStepChange)="currentStep = $event">
  <div appStepBody>
    <router-outlet></router-outlet>
    <app-deploy *ngIf="false" (ruleDeployed)="appSteps.resetStep()"></app-deploy>
  </div>
</app-steps>

app-steps является родительским элементом app-deploy в appStepBody. Я скрываю компонент развертывания приложения, потому что он уже отображается в appStepBody, и я просто хочу вызвать родительскую функцию из дочернего компонента.

Код для resetStep ():

resetStep(): void {
    console.log('Hello');
}

Внутри приложения-развертывания:

@Output() ruleDeployed = new EventEmitter();
//this method is fired by clicking Deploy button
deploy() {
  this.ruleDeployed.emit();
}

Однако console.log ("Hello") не работают, когда я нажимаю кнопку «Развернуть». Буду очень признателен за любую помощь. Извините, если это сбивает с толку.

Answer 1

ngIf не «скрывает» ваш компонент. Это структурные директивы, цитирующие документы :

Структурная директива, которая условно включает шаблон, основанный на значении выражения, приведенного к Boolean.

Это означает, что ваш компонент app-deploy никогда не включается, вы удалили его со сгенерированной страницы. Он не может вызвать какой-либо метод, потому что его там нет.