使用 ToggleButton ($event) 在 Angular 中出错 -- 发出事件

Question

我编写了一个按钮来关闭和打开边栏。

所以在 default.component**。html** 我将收到事件：

<app-header (toggleSideBarForMe)="sideBarToggler($event)"></app-header>

在 Typescript 模块中 default.component.ts 我编写了一个函数：

sideBarOpen = true;

  constructor() { }

  ngOnInit(): void { }
    sideBarToggler() {
      this.sideBarOpen = !this.sideBarOpen;
    }

关闭和打开侧边栏按钮的header在header.component.ts：用户从该模块单击，事件将发送到其他模块名称 default.component**.html.

@Output() toggleSideBarForMe: EventEmitter<any> = new EventEmitter();

  constructor() { }

  ngOnInit(): void { }

    toggleSideBar() {
      this.toggleSideBarForMe.emit();

   
  }

现在您可以在控制台中看到错误：

ERROR in src/app/layouts/default/default.component.html:1:50 - error TS2554: Expected 0 arguments, but got 1.

1 <app-header (toggleSideBarForMe)="sideBarToggler($event)"></app-header>
                                                   ~~~~~~

  src/app/layouts/default/default.component.ts:5:16
    5   templateUrl: './default.component.html',
                     ~~~~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component DefaultComponent.

那么到底是什么问题呢？我曾多次尝试解决这些问题，但没有弄清楚它是如何工作的。我是 Angular 的新手。谢谢

伊甸园

Answer 1

您将 $event 作为参数从 html 传递，但未在函数定义中定义。 default.component.ts

  sideBarOpen = true;

  constructor() { }

  ngOnInit(): void { }
  sideBarToggler(event) { // add event argument here.
    this.sideBarOpen = !this.sideBarOpen;
  }

或从模板中删除

<app-header (toggleSideBarForMe)="sideBarToggler()"></app-header>

Answer 2

您在模板中绑定 sideBarToggler($event)，但控制器 (sideBarToggler()) 中的事件处理程序没有参数。

既然不使用事件，最好把模板中的参数去掉。

<app-header (toggleSideBarForMe)="sideBarToggler()"></app-header>

或如果您在处理程序中所做的只是切换变量，您可以直接在模板中进行。

<app-header (toggleSideBarForMe)="sideBarOpen = !sideBarOpen"></app-header>

不再需要 sideBarToggler() 处理程序。

Answer 3

在下面的代码中，您传递了一个参数 $event

(toggleSideBarForMe)="sideBarToggler($event)"

但在功能层面，您不会接收或处理它。

 toggleSideBar() {                    // no receiving parameter
  this.toggleSideBarForMe.emit();
 }

解决方案

从 html

中删除 $event

(toggleSideBarForMe)="sideBarToggler()"

或

为您的函数添加一个接收参数，如下所示，

 toggleSideBar(event) {              // event (receiving parameter) added
  this.toggleSideBarForMe.emit();
 }

使用 ToggleButton ($event) 在 Angular 中出错 -- 发出事件

Error in Angular with the ToggleButton ($event) -- Emit an Event

frontend

event-handling

angular