Angular 2 Komponente in Komponente

Question

Ok, Angular 2 scheint ab jetzt sehr cool, aber ich bekomme immer noch einige Probleme damit. Die Sache ist, ich möchte "Mini-View-Komponenten", was bedeutet, eine kleine Ansicht eines Artikels (ein Kunde zum Beispiel) als eine Schaltfläche oder einen Link. Beispiel: Eine Verkaufsauflistung (diesen Teil habe ich herausgefunden, um herauszufinden), es enthält ein Feld, das der Kunde ist, anstatt nur die Kundennummer dort zu zeigen, wollte ich eine Schaltfläche sein, die beim Klicken auf ein modales Fenster (Bootstrap Modal)) würde mit den Details des Kunden zeigen. Das gleiche Verhalten auch für Lieferanten, Produkte und so weiter. Ich habe versucht, eine "customermini" -Komponente zu erstellen. Ich übergebe den Kundencode als eine Direktive und die Schaltfläche feuert "getCustomer", der eine Service-Methode auslöst und den Kunden erhält. Das wird alles "mittelmäßig". Die Sache ist, dass diese "Minikunden" -Komponente ihre Interpolation mit dem Objekt in der "getCustomer" -Methode bekommt. Aber immer wenn die Interpolation "feuert" bekomme ich einen Fehler. Die Frage ist also: Was ist der beste Ansatz für diese Situation? Ich möchte, dass diese "Mini" -Komponenten überall in der Anwendung verfügbar sind, da es viele "Dinger" gibt, die in den Auflistungen nur eine ID sind, aber ich möchte, dass sie "sichtbar" sind. Und als Sie im Voraus.

Edit: Hinzufügen einiger Code:

import {Component} from "angular2/core"; 
import {ClienteService} from "./clientes.service"; 
import {Cliente} from "./cliente.model"; 
import {DateString} from './dateString.pipe'; 
import {CustomerMiniComponent} from "./customer.mini.component"; 

@Component({ 
selector: 'saleslist', 
templateUrl: 'app/sales.template.html', 
directives: [CustomerMiniComponent], 
pipes: [DateString] 
}) 
export class SalesListComponent{ 
clientes: Cliente[]; 
constructor(private clienteService: ClienteService){}; 
lerClientes(){ 
    this.clienteService.getClientes().subscribe(clientes => this.clientes = clientes, 
    err => { 
     console.log(err); 
    }); 

} 
    ngOnInit(){ 
     this.lerClientes(); //this is where I get the sales data, don't mind the names, its only a sandbox project, so... 
} 
} 

Der Service:

import {Injectable} from 'angular2/core'; 
import { Http, Response, Headers, RequestOptions } from 'angular2/http'; 
import {Observable} from "rxjs/Rx"; 
import {Cliente} from "./cliente.model"; 

@Injectable() 
export class ClienteService { 
private url = "http://localhost:8080/api/clientes"; 

constructor(private http: Http){ 

} 
getCliente (codigo) :Observable<Cliente[]> 
{ 
    return this.http.get(this.url + "/" + codigo) 
     .map((res:Response) => res.json()) 
     .catch((error:any) => Observable.throw(error.json().error || 'Server error')); ; 
    // var tudo; 
    // return this.http.get(this.url + "/" + codigo) 
    //  .map((res:Response) =>{tudo = res.json(); var cli = new Cliente; cli=tudo; console.log(cli);}) 
    //  .catch((error:any) => Observable.throw(error.json().error || 'Server error')); 

} 

getClientes() :Observable<Cliente[]> 
{ 
    return this.http.get(this.url) 
     .map((res:Response) => res.json()) 
     .catch((error:any) => Observable.throw(error.json().error || 'Server error')); ; 
} 

} 

Die Customermini:

import {Component, Input, Injectable} from "angular2/core"; 
import {Cliente} from "./cliente.model"; 
import {DateString} from './dateString.pipe'; 
import {ClienteService} from "./clientes.service"; 


@Injectable() 
@Component({ 
selector: 'customermini', 
templateUrl: 'app/customer.mini.template.html', 
pipes: [DateString] 

}) 

export class CustomerMiniComponent{ 
@Input('codigo') clicli: string; 

ClienteGot: Cliente[]; 
Cliente: Cliente; 
    constructor(private clienteService: ClienteService){}; 

public lerCliente(){ 
    this.clienteService.getCliente(this.clicli).subscribe(cli => this.ClienteGot = cli); 


    if (this.ClienteGot != undefined) 
    { 
     this.Cliente = this.ClienteGot[0]; 
     console.log(this.Cliente); 
    } 

} 
    ngOnInit(){ 
     //this.lerCliente(); 
} 
} 

Und in der customermini Vorlage html gibt es die Interpolation Tags für das Objekt "Cliente" welches der Kunde ist.

Answer 1

Einfache Antwort wäre, customermini basierend auf Status zu verbergen. Wenn Sie auf klicken, wird es angezeigt.

<button (click)="!show-modal-component"> </button> 

<customermini *ngIf="show-modal-component === true" [customerid]="sale.customerid"></customermini> 

Wenn es eine modale Komponente ist, die dynamisch erzeugt werden muss/gestartet, dann müssen Sie die modal in der übergeordneten oder untergeordneten Komponente öffnen und in Daten an die Funktion/Methode übergeben, die lanuches (NG2-UI- bootstrap) und diese modalen Komponenten zu "entryComponents: []" in App-Modulen hinzufügen, während dies irgendwo im HTML-Code enthalten ist. Dein Modal wird erst erstellt oder geladen, wenn auf die Schaltfläche geklickt wird. Bibliothek für mein modal ist Teil von "ng2-ui-bootstrap" alias Angular 2 Bootstrap.

<template ngbModalContainer></template> 


<button (click)="open(content/data to be passed to modal on click event, will launch your customermini modal)"> </button> 

in meiner Komponente:

import {customermini} from "./location of customermini component ts file" 

    /** 
    * [open open my modal for making events or other stuff!] 
    * @param {any} modalContent [any modal component] 
    */ 


    open(modalContent: any): void { 

     let modal = this.modalService.open(customermini); 
// Important! you can now pass in data to customermini. Will also launch //customermini 
     modal.componentInstance.customerInfo = modalContent; 

     } 

Best Practice ist mit Kind Komponenten modal Öffnung über die Ausgänge auslösen:

In Kind Komponente (nicht btw customermini, das ist Ihre modal Ich gehe davon aus):

@Output() openModal: EventEmitter<any> = new EventEmitter(); 

     openModalNow(componentModaldata: any): void { 
     this.openModal.emit(componentModaldata); 
     } 

HTML der untergeordneten Komponente:

<button (click)="openModalNow(data for modal)" </button> 

In Mutter Komponente:

open(modalContent: any): void { 

      let modal = this.modalService.open(customermini); 
    // Important! you can now pass in data to customermini. Will also launch //customermini 
      modal.componentInstance.customerid = modalContent.customerid; 

      } 

In geordneten Komponente HTML

<childComponent (openModal)='open($event)'> </childComponent>