javascript - span - style html5

Datos de 4 pasos angulares entre 2 componentes no relacionados

Question

Tengo una pregunta acerca de pasar datos en Angular.

Primero, no tengo una estructura como <parent><child [data]=parent.data></child></parent>

Mi estructura es

<container>
<navbar>
<summary></summary>
<child-summary><child-summary>
</navbar>
<content></content>
</container>

Entonces, en <summary /> tengo una selección que envía valor a <child-summary /> y <content /> .

El método OnSelect está bien activado con (cambiar) dentro del componente <summary /> .

Entonces, lo intenté con las @Input , @Output y @EventEmitter , pero no veo cómo recuperar el evento como @Input del componente, a menos que continúe con el patrón padre / hijo. Todos los ejemplos que he fundado tienen una relación entre los componentes.

EDITAR: Ejemplo con BehaviorSubject que no funciona (todos los servicios conectados a la API funcionan bien, solo el observable se activa al inicio, pero no cuando la selección ha cambiado el valor)

servicio compartido = company.service.ts (utilizado para recuperar datos de la empresa)

import { Injectable } from ''@angular/core'';
import { Headers, Http, Response } from ''@angular/http'';
import { BehaviorSubject } from ''rxjs/BehaviorSubject'';
import { Observable } from ''rxjs/Observable'';
import ''rxjs/add/operator/toPromise'';
@Injectable()
export class SrvCompany {
private accountsNumber = new BehaviorSubject<string[]>([]);
currentAccountsNumber = this.accountsNumber.asObservable();
changeMessage(accountsNumber: string[]) {
this.accountsNumber.next(accountsNumber);
}
private _companyUrl = ''api/tiers/'';
constructor(private http: Http) { }
getSociete(): Promise<Response> {
let url = this._companyUrl;
return this.http.get(url).toPromise();
}
}

invoice.component.ts (el "hijo")

import { Component, OnInit, Input } from ''@angular/core'';
import { Headers, Http, Response } from ''@angular/http'';
import { SrvInvoice } from ''./invoice.service'';
import { SrvCompany } from ''../company/company.service'';
@Component({
selector: ''invoice'',
templateUrl: ''tsScripts/invoice/invoice.html'',
providers: [SrvInvoice, SrvCompany]
})
export class InvoiceComponent implements OnInit {
invoice: any;
constructor(private srvInvoice: SrvInvoice, private srvCompany: SrvCompany)
{
}
ngOnInit(): void {
//this.getInvoice("F001");
// Invoice data is linked to accounts number from company.
this.srvCompany.currentAccountsNumber.subscribe(accountsNumber => {
console.log(accountsNumber);
if (accountsNumber.length > 0) {
this.srvInvoice.getInvoice(accountsNumber).then(data => this.invoice = data.json());
}
});
}
//getInvoice(id: any) {
// this.srvInvoice.getInvoice(id).then(data => this.invoice = data.json());
//}
}

company.component.ts (el "padre")

import { Component, Inject, OnInit, Input } from ''@angular/core'';
import { Headers, Http, Response } from ''@angular/http'';
import { SrvCompany } from ''./company.service'';
@Component({
selector: ''company'',
templateUrl: ''tsScripts/company/company.html'',
providers: [SrvCompany]
})
export class CompanyComponent implements OnInit {
societes: any[];
soc: Response[]; // debug purpose
selectedSociete: any;
ville: any;
ref: any;
cp: any;
accountNumber: any[];
constructor(private srvSociete: SrvCompany)
{
}
ngOnInit(): void {
this.getSocietes();
}
getSocietes(): void {
this.srvSociete.getSociete()
.then(data => this.societes = data.json())
.then(data => this.selectItem(this.societes[0].Id));
}
selectItem(value: any) {
this.selectedSociete = this.societes.filter((item: any) => item.Id === value)[0];
this.cp = this.selectedSociete.CodePostal;
this.ville = this.selectedSociete.Ville;
this.ref = this.selectedSociete.Id;
this.accountNumber = this.selectedSociete.Accounts;
console.log(this.accountNumber);
this.srvSociete.changeMessage(this.accountNumber);
}
}

Answer 1

Este es un caso en el que desea utilizar un servicio compartido, ya que sus componentes están estructurados como hermanos y nietos. Aquí hay un ejemplo de un video. Creé un video sobre cómo compartir datos entre componentes que resuelve este problema exacto.

Comience creando un BehaviorSubject en el servicio

import { Injectable } from ''@angular/core'';
import { BehaviorSubject } from ''rxjs/BehaviorSubject'';
@Injectable()
export class DataService {
private messageSource = new BehaviorSubject("default message");
currentMessage = this.messageSource.asObservable();
constructor() { }
changeMessage(message: string) {
this.messageSource.next(message)
}
}

Luego inyecte este servicio en cada componente y suscríbase al observable.

import { Component, OnInit } from ''@angular/core'';
import { DataService } from "../data.service";
@Component({
selector: ''app-parent'',
template: `
{{message}}
`,
styleUrls: [''./sibling.component.css'']
})
export class ParentComponent implements OnInit {
message:string;
constructor(private data: DataService) { }
ngOnInit() {
this.data.currentMessage.subscribe(message => this.message = message)
}
}

Puede cambiar el valor de cualquiera de los componentes y el valor se actualizará, incluso si no tiene la relación padre / hijo.

import { Component, OnInit } from ''@angular/core'';
import { DataService } from "../data.service";
@Component({
selector: ''app-sibling'',
template: `
{{message}}
<button (click)="newMessage()">New Message</button>
`,
styleUrls: [''./sibling.component.css'']
})
export class SiblingComponent implements OnInit {
message:string;
constructor(private data: DataService) { }
ngOnInit() {
this.data.currentMessage.subscribe(message => this.message = message)
}
newMessage() {
this.data.changeMessage("Hello from Sibling")
}
}

Answer 2

Hay dos soluciones para esto.

1. Esto se puede hacer a través del servicio compartido mediante el uso de observables.

2. Puedes usar ngrx / store para esto. Esto es similar al arco de Redux. Usted recibirá datos del estado.

Answer 3

Si el componente no está relacionado del que necesita, use el Servicio.

https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#bidirectional-service