Angular - Emitter szolgáltatás

Szerző: Sallai András
Copyright © Sallai András, 2022
Licenc: CC Attribution-Share Alike 4.0 International
Web: https://szit.hu

Bevezetés

Egy komponensből egy másik komponens függvényét szeretnénk meghívni.

A megoldáshoz az első komponens scriptjeinek mindenképpen előbb le kell futnia. Ehhez elég annyi, hogy az első komponenst meglátogatjuk. A hívás nem működik, ha frissítem a böngészőt, amikor a második komponens látszik.

Projektkészítés

ng new app01
cd app01
ng g c first  
ng g c second
ng g s emitter 
code .

Routing és menü

// src/app/app-routing.module.ts
const routes: Routes = [
  { path: 'first', component: FirstComponent },    
  { path: 'second', component: SecondComponent }    
]

// src/app/app.component.html
<ul>    
  <li><a routerLink="first">First komponens</a></li>    
  <li><a routerLink="second">Second komponens</a></li>    
</ul>    
<router-outlet></router-outlet>

Szolgáltatás

Importáljuk az EventEmitter osztályt:

//src/app/emitter.service.ts
import { EventEmitter, Injectable } from '@angular/core';

Az automatikus importálásnál ügyeljünk arra, hogy más útvonalon is van EventEmitter osztály.

Példányosítsuk az EventEmitter osztályt. Készítsünk egy onButtonClick() függvényt:

export class EmitterService {
  event = new EventEmitter()
 
  constructor() { }
 
  onButtonClick() {
    this.event.emit();
  }
}

A first komponens

Készítsük el a függvényt, amelyet a másik komponensből szeretnénk hívni:

// src/app/first/first.component.ts
  firstFunc() {
    alert('Elsőből')
  }

Importáljuk az EmitterService szolgáltatást:

// src/app/first/first.component.ts
import { EmitterService } from '../emitter.service';

A firstFunc() függvényt odaadjuk az emitter számára:

// src/app/first/first.component.ts
export class FirstComponent implements OnInit {
 
  constructor(private emitter: EmitterService) { }
 
  ngOnInit(): void {
      this.emitter.event.subscribe( () => {
        this.firstFunc()
      })
  }
  firstFunc() {
    alert('Elsőből')
  }
 
}

A second komponens

Importáljuk az EmitterService osztályt:

import { EmitterService } from '../emitter.service';

Futtassuk az emitteren keresztül a first komponens függvényét:

export class SecondComponent implements OnInit {
 
  constructor(private emitter: EmitterService) { }
 
  ngOnInit(): void {
  }
 
  firstCompFunc() {
    this.emitter.onButtonClick();
  }
}

<div>
    <button (click)="firstCompFunc()">Hívás</button>
</div>

Együtt

emitter.service.ts

// src/app/emitter.service.ts
 
import { EventEmitter, Injectable } from '@angular/core';
 
@Injectable({
  providedIn: 'root'
})
export class EmitterService {
  event = new EventEmitter()
 
  constructor() { }
 
  onButtonClick() {
    this.event.emit();
  }
}

app-routing.module.ts

// src/app/app-routing.module.ts
 
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { FirstComponent } from './first/first.component';
import { SecondComponent } from './second/second.component';
 
const routes: Routes = [
  { path: 'first', component: FirstComponent },    
  { path: 'second', component: SecondComponent }    
]
 
@NgModule({
  declarations: [],
  imports: [
    RouterModule.forRoot(routes)
  ],
  exports: [RouterModule]
})
export class AppRoutingModule { }

first.component.ts

// src/app/first.component.ts
 
import { Component, OnInit } from '@angular/core';
import { EmitterService } from '../emitter.service';
 
@Component({
  selector: 'app-first',
  templateUrl: './first.component.html',
  styleUrls: ['./first.component.css']
})
export class FirstComponent implements OnInit {
 
  constructor(private emitter: EmitterService) { }
 
  ngOnInit(): void {
      this.emitter.event.subscribe( () => {
        this.firstFunc()
      })
  }
  firstFunc() {
    alert('Elsőből')
  }
 
}

second.component.ts

// src/app/second/second.component.ts
 
import { Component, OnInit } from '@angular/core';
import { EmitterService } from '../emitter.service';
 
@Component({
  selector: 'app-second',
  templateUrl: './second.component.html',
  styleUrls: ['./second.component.css']
})
export class SecondComponent implements OnInit {
 
  constructor(private emitter: EmitterService) { }
 
  ngOnInit(): void {
  }
 
  firstCompFunc() {
    this.emitter.onButtonClick();
  }
}

second.component.html

<!-- src/app/second/second.component.html -->
 
<p>second works!</p>
 
<div>
    <button (click)="firstCompFunc()">Hívás</button>
</div>