迹忆客 专注技术分享

当前位置:主页 > 学无止境 > WEB前端 > Angular >

Angular 中的事件发射器

作者:迹忆客 最近更新:2023/03/13 浏览次数:

我们将在 Angular 中介绍 EventEmitter 以及在 Angular 中正确使用 EventEmitter。我们还将给出一个 Angular 的 EventEmitter 示例。

什么是 Angular 中的 EventEmitter

EventEmitter 是一个使用 emit()subscribe() 方法帮助在组件之间共享数据的模块。EventEmitter 位于 Observables 层,它观察变化和值并将数据发送到订阅了该 EventEmitter 实例的组件。

emit()

emit() 是一个 EventEmitter 方法,它发出包含给定值的事件。

emit(value?: A): void

emit() 只有一个参数,value

subscribe()

subscribe() 是一个 EventEmitter 方法,它为该实例发出的事件注册处理程序。

subscribe(next?: (value: A) => void, error?: (error: any) => void, complete?: () => void) : Subscription

subscribe() 具有三个可选参数,可用于在 EventEmitter 中传递值、错误或完成通知。

  • next 参数是已发出事件的自定义处理程序。
  • error 参数是来自此发射器的错误通知的自定义处理程序。
  • complete 参数是来自此发射器的完成通知的自定义处理程序。

在 Angular 中使用 EventEmitter

现在,我们将使用 EventEmitter 作为示例来完全理解它。在本例中,我们将更改组件的背景颜色和字体颜色,并在其他组件中显示其值。

因此,首先,我们将设置我们的 app.module.ts 文件并导入模块和组件。

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';

import { AppComponent } from './app.component';
import { HelloComponent } from './hello.component';
import { BgChangeComponent } from './bg-change.component';

@NgModule({
  imports: [BrowserModule, FormsModule],
  declarations: [AppComponent, HelloComponent, BgChangeComponent],
  bootstrap: [AppComponent],
})
export class AppModule {}

现在,我们将为我们的应用程序组件设置 html 文件,并在 app.component.html 文件中添加以下代码

<emitted (touch)="respond()" name="{{ name }}" [color]="color"></emitted>
<p>{{ response }}</p>
<p>{{ color }}</p>
<bg-change (colorChange)="changeColor($event)"></bg-change>

这里我们使用了 changeColor($event),它是一个 EventEmitter,我们在 responsecolor 中显示来自 EventEmitter 的值。

现在我们将设置 app.component.ts 文件并设置第一次加载页面时显示的 nameresponsecolor 变量的值。

我们将定义一个函数 respond(),它将改变 response 的值。

我们还将定义 changeColor() 函数,它将设置颜色的值。因此,我们的 app.component.ts 文件将如下所示:

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular 11';

  response = 'Background not changed yet';

  color = 'brown';

  respond() {
    this.response = 'Success';
  }

  changeColor(color) {
    this.color = color;
  }

}

现在我们将编辑我们的 hello.component.ts 文件并将以下代码添加到其中。

import {
  Component,
  Input,
  ElementRef,
  Renderer2,
  Output,
  EventEmitter,
  OnInit,
  OnChanges,
} from '@angular/core';

@Component({
  selector: 'emitted',
  template: `<h1
  (click)="emit()"
  >{{text}} {{name}}</h1>`,
})
export class HelloComponent implements OnInit, OnChanges {
  @Input() name: string;

  @Input() color = 'brown';

  text = 'It is';

  @Output()
  touch = new EventEmitter<string>();

  constructor(private renderer: Renderer2, private el: ElementRef) {}

  ngOnInit() {
    this.renderer.setStyle(this.el.nativeElement, 'color', this.color);
  }

  ngOnChanges() {
    this.renderer.setStyle(this.el.nativeElement, 'color', this.color);
  }

  emit() {
    this.touch.emit('touched');
  }
}

在上述组件中,@component 将从 app.component.html 文件中获取 emitted 标记,并在初始化时设置颜色。当按钮被点击时,它会改变颜色。我们还传递了加载时显示的 text

现在我们将添加一个新的 bg-change.component.ts 文件。并在其中添加以下代码。

import {
  Component,
  ViewChild,
  ElementRef,
  Renderer2,
  EventEmitter,
  Output,
} from '@angular/core';

@Component({
  selector: 'bg-change',
  template: `<button 
  (click)="Bgchange()" 
  >{{content}}</button>`,
  styles: [`button { padding: 10px; }`],
})
export class BgChangeComponent {
  body = this.el.nativeElement.ownerDocument.body;

  activateColor = 'white';

  @Output()
  colorChange = new EventEmitter<string>();

  content = 'Change Page Background';

  constructor(private renderer: Renderer2, private el: ElementRef) {}

  Bgchange() {
    this.colorChange.emit(this.activateColor);

    this.activateColor === 'white'
      ? (this.activateColor = 'red')
      : (this.activateColor = 'white');

    this.renderer.setStyle(this.body, 'background', this.activateColor);
  }
}

所以我们的输出将如下所示。

Angular 中的 eventemiiter 示例

转载请发邮件至 1244347461@qq.com 进行申请,经作者同意之后,转载请以链接形式注明出处

本文地址:

相关文章

在 Angular 中上传文件

发布时间:2023/04/14 浏览次数:71 分类:Angular

本教程演示了如何在 Angular 中上传任何文件。我们还将介绍如何在文件上传时显示进度条,并在上传完成时显示文件上传完成消息。

Angular 2 中的复选框双向数据绑定

发布时间:2023/04/14 浏览次数:139 分类:Angular

本教程演示了如何一键标记两个复选框。这篇有 Angular 的文章将着眼于执行复选框双向数据绑定的不同方法。

在 AngularJs 中加载 spinner

发布时间:2023/04/14 浏览次数:107 分类:Angular

我们将介绍如何在请求加载时添加加载 spinner,并在 AngularJs 中加载数据时停止加载器。

在 Angular 中显示和隐藏

发布时间:2023/04/14 浏览次数:78 分类:Angular

本教程演示了 Angular 中的显示和隐藏。在开发商业应用程序时,我们需要根据用户角色或条件隐藏一些数据。我们必须根据该应用程序中的条件显示相同的数据。

在 Angular 中下载文件

发布时间:2023/04/14 浏览次数:104 分类:Angular

本教程演示了如何在 angular 中下载文件。我们将介绍如何通过单击按钮在 Angular 中下载文件并显示一个示例。

扫一扫阅读全部技术教程

社交账号
  • https://www.github.com/onmpw
  • qq:1244347461

最新推荐

教程更新

热门标签

扫码一下
查看教程更方便