parametros - ¿Cómo pasar objetos de un componente a otro en Angular 2?

pasar datos entre componentes angular 5

Question

Tengo componentes angulares y el primer componente usa el segundo como directiva . Deben compartir el mismo objeto modelo, que se inicializa en el primer componente. ¿Cómo puedo pasar ese modelo al segundo componente?

Answer 1

Componente 2, el componente de directiva puede definir una propiedad de entrada (anotación @input en Typecript). Y el Componente 1 puede pasar esa propiedad al componente directivo desde la plantilla.

Vea esta respuesta SO ¿Cómo hacer una comunicación entre un componente maestro y un componente detallado en Angular2?

y cómo se pasa la entrada a los componentes secundarios. En tu caso es directiva.

Answer 2

De componente

import { Component, OnInit, ViewChild} from ''@angular/core'';
import { HttpClient } from ''@angular/common/http'';
import { dataService } from "src/app/service/data.service";
@Component( {
selector: ''app-sideWidget'',
templateUrl: ''./sideWidget.html'',
styleUrls: [''./linked-widget.component.css'']
} )
export class sideWidget{
TableColumnNames: object[];
SelectedtableName: string = "patient";
constructor( private LWTableColumnNames: dataService ) {
}
ngOnInit() {
this.http.post( ''getColumns'', this.SelectedtableName )
.subscribe(
( data: object[] ) => {
this.TableColumnNames = data;
this.LWTableColumnNames.refLWTableColumnNames = this.TableColumnNames; //this line of code will pass the value through data service
} );
}
}

Servicio de datos

import { Injectable } from ''@angular/core'';
import { BehaviorSubject, Observable } from ''rxjs'';
@Injectable()
export class dataService {
refLWTableColumnNames: object;//creating an object for the data
}

Al componente

import { Component, OnInit } from ''@angular/core'';
import { dataService } from "src/app/service/data.service";
@Component( {
selector: ''app-linked-widget'',
templateUrl: ''./linked-widget.component.html'',
styleUrls: [''./linked-widget.component.css'']
} )
export class LinkedWidgetComponent implements OnInit {
constructor(private LWTableColumnNames: dataService) { }
ngOnInit() {
console.log(this.LWTableColumnNames.refLWTableColumnNames);
}
createTable(){
console.log(this.LWTableColumnNames.refLWTableColumnNames);// calling the object from another component
}
}

Answer 3

Para el enlace de datos unidireccional de padre a hijo, use el decorador @Input (como lo recommended la guía de estilo) para especificar una propiedad de entrada en el componente hijo

@Input() model: any; // instead of any, specify your type

y usar el enlace de propiedad de plantilla en la plantilla principal

<child [model]="parentModel"></child>

Como está pasando un objeto (un tipo de referencia de JavaScript), cualquier cambio que realice en las propiedades del objeto en el componente primario o secundario se reflejará en el otro componente, ya que ambos componentes tienen una referencia al mismo objeto. Lo muestro en el Plunker .

Si reasigna el objeto en el componente primario

this.model = someNewModel;

Angular propagará la nueva referencia de objeto al componente hijo (automáticamente, como parte de la detección de cambios).

Lo único que no debe hacer es reasignar el objeto en el componente secundario. Si hace esto, el padre seguirá haciendo referencia al objeto original. (Si necesita un enlace de datos bidireccional, consulte https://.com/a/34616530/215945 ).

@Component({
selector: ''child'',
template: `<h3>child</h3>
<div>{{model.prop1}}</div>
<button (click)="updateModel()">update model</button>`
})
class Child {
@Input() model: any; // instead of any, specify your type
updateModel() {
this.model.prop1 += '' child'';
}
}
@Component({
selector: ''my-app'',
directives: [Child],
template: `
<h3>Parent</h3>
<div>{{parentModel.prop1}}</div>
<button (click)="updateModel()">update model</button>
<child [model]="parentModel"></child>`
})
export class AppComponent {
parentModel = { prop1: ''1st prop'', prop2: ''2nd prop'' };
constructor() {}
updateModel() { this.parentModel.prop1 += '' parent''; }
}

Plunker - Angular RC.2

Answer 4

También puede almacenar sus datos en un servicio con un setter y obtenerlos a través de un getter

import { Injectable } from ''@angular/core'';
@Injectable()
export class StorageService {
public scope: Array<any> | boolean = false;
constructor() {
}
public getScope(): Array<any> | boolean {
return this.scope;
}
public setScope(scope: any): void {
this.scope = scope;
}
}

Answer 5

Usa la anotación de salida

@Directive({
selector: ''interval-dir'',
})
class IntervalDir {
@Output() everySecond = new EventEmitter();
@Output(''everyFiveSeconds'') five5Secs = new EventEmitter();
constructor() {
setInterval(() => this.everySecond.emit("event"), 1000);
setInterval(() => this.five5Secs.emit("event"), 5000);
}
}
@Component({
selector: ''app'',
template: `
<interval-dir (everySecond)="everySecond()" (everyFiveSeconds)="everyFiveSeconds()">
</interval-dir>
`,
directives: [IntervalDir]
})
class App {
everySecond() { console.log(''second''); }
everyFiveSeconds() { console.log(''five seconds''); }
}
bootstrap(App);