Angular @Output 不工作

Question

尝试与@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>

Answer 1

父组件模板：

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

在父模板中@Output 应该是'called'，而不是子方法。

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

Answer 2

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

通过使用 @Output() 你应该在发射器的指令中应用你需要发出的事件 component.Adding 变量的名称到指令，但是在引号内发出的函数通过 $event.

Answer 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 包含发出的内容，在本例中为字符串

Answer 4

touchHere() 是一种方法，您可以从中绑定一些值以使用 EventEmitter 发出。而你的 EventEmitter 是 'emitor'。

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

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

Angular @Output 不工作

Angular @Output not working

javascript

angular-components

angular