szit

Ez az oldal csak olvasható. Megtekintheted a forrását, de nem változtathatod meg. Ha úgy gondolod, hogy ez helytelen, kérdezd az Adminisztrátorokat!
[[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 =====

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

===== Routing és menü =====

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


<code javascript>
// 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> 
</code>

===== Szolgáltatás =====

Importáljuk az EventEmitter osztályt:
<code javascript>
//src/app/emitter.service.ts
import { EventEmitter, Injectable } from '@angular/core';
</code>

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

Példányosítsuk az EventEmitter osztályt. 
Készítsünk egy onButtonClick() függvényt:
<code javascript>
export class EmitterService {
  event = new EventEmitter()

  constructor() { }

  onButtonClick() {
    this.event.emit();
  }
}
</code>

===== A first komponens =====

Készítsük el a függvényt, amelyet a másik komponensből szeretnénk hívni:
<code javascript>
// src/app/first/first.component.ts
  firstFunc() {
    alert('Elsőből')
  }
</code>

Importáljuk az EmitterService szolgáltatást:
<code javascript>
// src/app/first/first.component.ts
import { EmitterService } from '../emitter.service';
</code>


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

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

}
</code>

===== A second komponens =====

Importáljuk az EmitterService osztályt:
<code javascript>
import { EmitterService } from '../emitter.service';
</code>

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

<code javascript>
export class SecondComponent implements OnInit {

  constructor(private emitter: EmitterService) { }

  ngOnInit(): void {
  }

  firstCompFunc() {
    this.emitter.onButtonClick();
  }
}
</code>

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

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

<tabbox emitter.service.ts>

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

</code>

<tabbox app-routing.module.ts>

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

</code>


<tabbox first.component.ts>

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

}
</code>

<tabbox second.component.ts>

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

</code>

<tabbox second.component.html>

<code html>
<!-- src/app/second/second.component.html -->

<p>second works!</p>

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

</code>



</tabbox>