Angular @Output 不起作用

Posted 2023-03-13

【中文标题】Angular @Output 不起作用

【英文标题】：Angular @Output not working

【发布时间】：2017-12-13 11:00:32

【问题描述】：

尝试使用@Output 事件发射器进行子与父通信，但无法正常工作 这是子组件

import  Component, OnInit, Output, Input, EventEmitter  from '@angular/core';

@Component(
  selector: 'app-emiter',
  templateUrl: './emiter.component.html',
  styleUrls: ['./emiter.component.css']
)
export class EmiterComponent implements OnInit 

@Output() emitor: EventEmitter<any>
  constructor()  this.emitor = new EventEmitter()

   touchHere()this.emitor.emit('Should Work');
   console.log('<><><><>',this.emitor) // this comes empty
  

  ngOnInit() 
  

这是html模板

<p>
<button (click)=" touchHere()" class="btn btn-success btn-block">touch</button>
</p>

touchHere里面的console.log什么都不显示 即使我把它放在父组件中，它也什么都不显示 父组件

 import  Component , OnInit from '@angular/core';
// service I use for other stuff//
    import  SenderService  from './sender.service';
// I dont know if I have to import this but did it just in case
    import  EmiterComponent  from './emiter/emiter.component'

@Component(
      selector: 'app-root',
      templateUrl: './app.component.html',
      styleUrls: ['./app.component.css']
    )
    export class AppComponent 
      title = 'app';
      user: any;
      touchThis(message: string) 
        console.log('Not working: $message');
      
        constructor(private mySessionService: SenderService)  
    

这里是html模板

<div>
  <app-emiter>(touchHere)='touchThis($event)'</app-emiter>
</div>

【参考方案1】：

父组件模板：

  <app-emitor (emitor)='touchThis($event)'></app-emiter>

在父模板中应该“调用”@Output，而不是子方法。

另请参阅：https://angular.io/guide/component-interaction#parent-listens-for-child-event

【讨论】：

@Output 装饰器在子级中，因为子级会发出一个事件。该事件应该是 console.logged 但显示为空。在父级中，我放置了事件处理程序来接收发出的事件，但在子级中，当 console.log

时我应该看到一些东西

当然@Output 它在子组件中，你应该在父模板中调用它。在您的代码中，您改为调用子方法 (touchHere)

这是父模板 (touchHere)='touchThis($event)' 我在里面调用 touchHere父组件中的选择器。但无论如何，如果我 console.log 让孩子登录，我应该会看到一些东西，但我不是

这是一个老问题，但感谢 Vega .. 我在编写代码时遇到了错误

很高兴您找到了解决方案 :)

【参考方案2】：

 <app-emiter (emitor)="touchThis($event)" ></app-emiter>

通过使用@Output()，您应该在发射器组件的指令中应用您需要发出的事件。将变量的名称添加到指令中，但在传递$event 的引号内发出的over 函数。

【参考方案3】：

以下是我们如何编写具有输出的组件的示例：

@Component(
  selector: 'single-component',
  template: `<button (click)="liked()">Like it?</button>`
 )
 class SingleComponent 
 @Output() putRingOnIt: EventEmitter<string>;

 constructor() 
 this.putRingOnIt = new EventEmitter();
 

 liked(): void 
 this.putRingOnIt.emit("oh oh oh");
 

请注意，我们完成了所有三个步骤：1. 指定输出，2. 创建了我们附加的 EventEmitter 到输出属性 putRingOnIt 和 3. 当点赞被调用时发出一个事件。

如果我们想在父组件中使用这个输出，我们可以这样做：

@Component(
  selector: 'club',
  template: `
    <div>
      <single-component
        (putRingOnIt)="ringWasPlaced($event)"
        ></single-component>
    </div>`
)
class ClubComponent 
ringWasPlaced(message: string)  console.log(`Put your hands up: $message`);
 
// logged -> "Put your hands up: oh oh oh"

再次注意：

putRingOnIt 来自 SingleComponent 的输出 ringWasPlaced 是 ClubComponent 上的一个函数 $event 包含发送的内容，在本例中为字符串

【参考方案4】：

touchHere() 是您绑定某些值以使用 EventEmitter 发射的方法。而您的 EventEmitter 是“发射器”。

因此，如果您只需执行以下操作，您的代码就可以工作：

<app-emiter (emitor)='touchThis($event)'></app-emiter>