[[oktatas:web:angular:angular_komponensek_kommunikacioja|< Angular komponensek kommunikációja]] ====== Angular - Emitter szolgáltatás ====== * **Szerző:** Sallai András * Copyright (c) Sallai András, 2022 * Licenc: [[https://creativecommons.org/licenses/by-sa/4.0/|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
    
  First komponens    
  Second komponens

===== 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();
  }
}

===== Együtt =====


// 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();
  }
}


// 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 { }


// 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')
  }

}


// 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 works!