Diğer bileşenlerin Angular2 çağrı yöntemi

Question

Başlığım bileşeni oluşturduğum bir Angular2 uygulamasına sahibim.

Şimdi, başka bir Form bileşenim var. Bunu nasıl yapabilirim?

Başlıktaki gönderme düğmesi ile Form bileşeninin gönderme yöntemi arasında iletişim kurmaya ihtiyacım var. Ebeveyn> çocuk veya çocuk> ebeveyn iletişimi yapmanın önemsiz olduğunu biliyorum, ancak bu durumda Üstbilgi ve Form bileşenleri arasında ebeveyn-çocuk ilişkisi veya kardeş ilişkisi yoktur.

Benim bileşen ağaç şöyle görünür:

- app-root 
    |-- app-header // -> this is where the submit button is 
    |-- app-edit-profile 
     |-- app-profile-form // -> this is my form 

birisi olası bir uygulamasının bir fikri var mı?

Answer 1

Observable tanımlayabileceğiniz, üstbilgi ile form bileşeni arasında paylaşılan bir hizmet oluşturabilir ve böylece Observable formuna abone olabilir ve üstbilgiden bir değer aldığınızda bazı eylemler gerçekleştirebilirsiniz.

common.service.ts

import { Injectable, Inject } from '@angular/core'; 
import { Subject } from 'rxjs/Subject'; 
@Injectable() 
export class CommonService { 
    private notify = new Subject<any>(); 
    /** 
    * Observable string streams 
    */ 
    notifyObservable$ = this.notify.asObservable(); 

    constructor(){} 

    public notifyOther(data: any) { 
    if (data) { 
     this.notify.next(data); 
    } 
    } 
} 

header.component.ts

import { Component, OnInit, OnDestroy } from '@angular/core'; 
import { Subscription } from 'rxjs/Subscription'; 

import { CommonService } from './common.service'; 

@Component({ 
    selector : 'header', 
    templateUrl : './header.html' 
}) 
export class HeaderComponent implements OnInit, OnDestroy { 
    constructor(private commonService: CommonService){ 
    } 

    ngOnInit() {  
    } 

    onSubmit(){ 
    // this method needs to be called when user click on submit button from header 
    this.commonService.notifyOther({option: 'onSubmit', value: 'From header'}); 
    } 
} 

form.component.ts

import { Component, OnInit, OnDestroy } from '@angular/core'; 
import { Subscription } from 'rxjs/Subscription'; 

import { CommonService } from './common.service'; 

@Component({ 
    selector : 'form', 
    templateUrl : './form.html' 
}) 
export class FormComponent implements OnInit, OnDestroy { 
    private subscription: Subscription; 
    constructor(private commonService: CommonService){ 
    } 

    ngOnInit() { 
    this.subscription = this.commonService.notifyObservable$.subscribe((res) => { 
     if (res.hasOwnProperty('option') && res.option === 'onSubmit') { 
     console.log(res.value); 
     // perform your other action from here 

     } 
    }); 
    } 

    ngOnDestroy() { 
    this.subscription.unsubscribe(); 
    } 
} 

Answer 2

Gözlemlenebilir çözümlere ek olarak, bence, bu tür senaryolarda kullanımı daha kolay olduğu için, EventEmitters hakkında bir şeyler söylemek önemlidir. Çocuk kontrolörü

ithalat EventEmitter ve Çıkış tipleri ise

.Bir ile, nihayet

this.formSubmit$ = new EventEmitter();

ve şu şekildedir:

@Output() formSubmit$: EventEmitter<boolean>;

kurucusundaki EventEmitter başlatmak için hatırlamak EventEmitter

import { EventEmitter, Output } from "@angular/core

türünde bir çıkış mal beyanında gönderme düğmesine bağlı uygun eylem , Uygulamanıza genelinde olayı yaymak "yayarlar" yöntemini EventEmitter tetikler: ebeveynin görünümünde ebeveyn Kontrolörü

yılında

this.formSubmit$.emit(true);

, bir eylem formSubmit $ olayı bağlamak kontrol:

<child-selector (formSubmit$)="handleFormSubmit($event)"></child-selector>

sonra denetleyicisi yöntem bildirmek

public handleFormSubmit(submit: boolean): void { 
    alert("Form has been submitted! Do your stuff here!"); 
} 

Açıkçası, stratejisinin bu tür sadece Bir üst kontrolöre bir çocuktan veri alışverişi için gereken kullanılabilir.

Answer 3

Veli ve çocukların bir hizmet

Angular2 call method of other component

Answer 4

hizmet ve konuların kullanılması kolay yoludur aracılığıyla iletişim kurarlar. Eğer veri kaydını tutmak istiyorsanız, sen bile bile eventbus olarak adlandırılan bir kütüphane deneyebilirsiniz, yeniden oynatma özneye

private notify: ReplaySubject<any> = new ReplaySubject<any>(); 

kullanabilirsiniz Ama edebilirsiniz. Aynı sorunları yaşadım ve eventbus bunun için sadece doğru cevap.