Zugriff Variable von einer Komponente in eine andere

Question

Ich versuche, ein paar eckige Projekt zu tun, aber ich bin nicht in Web-Entwicklung. Sein einfaches Geschäft.
Ich wollte ein paar Informationen von sqlite von Play Framework bekommen. Es funktioniert.

Nachdem ich es in Winkel und Display erhalten. Es funktioniert auch. Service:

@Injectable() 
export class ProductService { 

constructor(private http: Http) { } 

getProducts() { 
    const headers: Headers = new Headers(); 
    headers.append('Accept', 'application/json'); 
    headers.append('Content-Type', 'application/json'); 

    const options = new RequestOptions({headers: headers}); 

    return this.http.get('http://localhost:9900/', options) 
    .map(response => <Product[]>response.json()); 
} 
} 

Und dann statt, wenn ich nehme alle Produkte:

export class ProductComponent implements OnInit { 

public products: Product[]; 
actualProduct: Product; 
productForm: FormGroup; 
public quantity: number; 
private activeFilter: string = "reset"; 
public allFilters: Array<string>; 


constructor(private productService: ProductService,private router:Router) { 
    this.allFilters = ['ocean', 'river', 'aquarium', 'reset']; 
} 

ngOnInit() { 
    this.productService.getProducts().subscribe(data => this.products = data); 
} 

public getActualProduct() { 
    return this.actualProduct; 
} 

clickedProduct(product) { 
    this.actualProduct = product; 
    let link = ['/detail', product.prodId]; 
    this.router.navigate(link); 
} 

public setFilter(filter: string) { 
this.activeFilter = filter; 
} 
} 

Also meine Frage: Wie kann ich den Zugriff auf Array-Produkte in anderen Komponenten? Denn jetzt, wenn ich auf die Schaltfläche mit der Funktion clickedProduct klicke funktioniert es perfekt. Es wird im Konsolenobjekt Produkt angezeigt. Aber wenn ich versuche, ein Produkt zu verwenden, um Produktdetails in einer anderen Komponente angezeigt Ich verstehe nicht:

export class ProductDetailComponent implements OnInit { 

selectedProduct: Product; 
products: Product[]; 
quantity: number; 

constructor(
private productService:ProductService, 
private productComponent: ProductComponent, 
private route:ActivatedRoute, 
private location:Location, 
    // private cartStore: CartStore 
) { } 

ngOnInit() { 
    this.selectedProduct = this.productComponent.getActualProduct(); 
} 

addToCart(product) { 
    console.log(this.selectedProduct) 
    console.log(product) 
    //this.cartStore.addToCart(product, this.quantity || 1) 
} 

goBack() { 
    this.location.back() 
} 
} 

Wie kann ich actualProduct Variable in ProductDetailComponent bekommen, oder wie kann ich Array aller Produkte? Ich habe versucht, "@Input() actualProduct: Product" in ProductComponent, aber es funktioniert tatsächlich nicht. Danke für Hilfe.

Answer 1

Dies hängt stark mit der Art zusammen, in der diese Komponenten miteinander verwandt sind.

Wenn es eine ist Eltern-Kind-Beziehung, können Sie Informationen zu der untergeordneten Komponente unter Verwendung @Input Eigenschaften und hören Sie die Kinderveranstaltungen in der Mutter mittels @Output Eigenschaften bestehen.

Wenn eine solche Beziehung zwischen den Komponenten muß nicht existieren (beispielsweise Komponenten geroutet), dann ist die häufigste Möglichkeit ist, einen Dienst zu schaffen, die die Informationen/Ereignisablauf zwischen den Komponenten verwaltet.

Für nähere Informationen finden Sie in the docs