父組件中的 function 沒有被調用？

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 是 appStepBody 中 app-deploy 的父級。 我隱藏了 app-deploy 組件，因為它已經顯示在 appStepBody 中，我只想從子組件調用父 function。

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 的表達式的值的模板。

這意味着您的“應用程序部署”組件永遠不會包含在內，您已將其從生成的頁面中刪除。 它不能調用任何方法，因為它不存在。