事件发射器在子组件中不起作用答案

【问题标题】：Event Emitter not working in child component事件发射器在子组件中不起作用
【发布时间】：2021-04-28 04:11:46
【问题描述】：

在我的 Angular 应用程序中，如果我通过 url 事件发射器发出的事件未在父组件中触发。

例如：

如果我在浏览器中输入完整的网址。 http://localhost:4200/child

我的子组件正在加载。但是关闭事件发射器发出的事件未在父组件中触发。下面是我的代码。

文件：app.routing.module.ts

  const routes: Routes = [
   
    {path : 'child', component : ChildComponent},
    
  ];

文件：app.component.html

    <div>
    <app-bibdpayment *ngIf="show == true" (close)="cancel()"></app-bibdpayment>
    <router-outlet></router-outlet>

文件：app.component.ts

    cancel() {
        this.show = false;
    }

文件：childcomponent.html

   <button class="btn btn-primary" (click)="cancel()">Cancel</button>

文件：childcomponent.ts

    @Output() close = new EventEmitter<void>();  
    cancel() {
       this.close.emit();
    }

为什么事件发射器不工作。当我们直接调用子组件url时。

如何解决此问题。任何帮助将不胜感激！！！

【问题讨论】：

【解决方案1】：

您在模板中为 show 分配 true，因此 show 的值始终包含相同的值。因此您必须从 component.ts 文件中管理 show 的值。为了您更好地理解，我在下面提供代码详细信息：

ChildComponent.ts

@Output() close = new EventEmitter<any>();

cancel() 
{
  this.close.emit();
}

ParantComponent.html

**您不需要在 ngIf 条件下为 show 变量赋值。只需将变量放在 ngIf 上并按照我的步骤操作即可。

<app-bibdpayment *ngIf="show" (close)= "close()"></app-bibdpayment>

ParantComponent.ts

定义一个全局变量，如下所示：

show = true;

然后声明您的函数并按照我在 ParantComponent.ts 文件中的步骤操作：

close()
{
  this.show = false;
}

希望它会奏效。谢谢！ :(

【讨论】：