角2のコンポーネント内部コンポーネント

Question

現在、角度2は非常にクールだと思われますが、まだ問題があります。つまり、「ミニビューコンポーネント」が必要です。これは、ボタンやリンクとして一部のアイテム（顧客など）の小さなビューを意味します。例：販売リスト（私が把握する部分）、そこに顧客IDだけを表示するのではなく、顧客であるフィールドが含まれています。私はそれをモーダルウィンドウ（ブートストラップモーダル）は、顧客の詳細と一緒に表示されます。これはサプライヤーや製品などにも同じです。私は "customermini"コンポーネントを作ろうとしました。私はディレクティブとして顧客コードを渡し、ボタンは "getCustomer"を起動します。これはサービスメソッドを起動して顧客を取得します。これはすべて「平凡」になります。問題は、この「ミニカスタマ」コンポーネントは、「getCustomer」メソッドで取得されたオブジェクトで補間されていることです。しかし、補間が「発生する」たびにエラーが発生します。だから問題は：この状況に最も適したアプローチは何ですか？この「ミニ」コンポーネントは、アプリケーション全体でどこでも利用できるようにしておきたい。なぜなら、リストにはidだけしかないものがたくさんあるからですが、それらを「視認可能」にしたいのです。そしてあなたよりも前に。

編集：いくつかのコードを追加：

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... 
} 
} 

サービス：

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')); ; 
} 

} 

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(); 
} 
} 

そしてcustomerminiテンプレートHTMLに、補間タグがあります顧客であるオブジェクト「Cliente」。

Answer 1

簡単な答えは、ステータスに基づいてcustomerminiを非表示にすることです。クリックすると表示されます。

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

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

それは、動的に打ち上げ/生成されなければならないモーダル・コンポーネントをだならば、あなたは親または子要素でモーダルを開き、（NG2-UI- lanuches関数/メソッドにデータを渡す必要がありますブートストラップ）、これらのモーダルコンポーネントをappモジュールの "entryComponents：[]"に追加しますが、これはhtmlの中に入れてください。あなたのモーダルは、ボタンがクリックされるまで作成されず、データをロードしません。私のモーダルのライブラリは、 "ng2-ui-bootstrap"（角2のブートストラップ）の一部です。私のコンポーネントで

<template ngbModalContainer></template> 


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

：

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; 

     } 

ベストプラクティスを持っている子コンポーネントが出力を経由してモーダル開口部をトリガー：

子コンポーネントで（ところでcustomerminiない、それはあなたのモーダルだ私は仮定）：

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

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

子コンポーネントのHTML：

親コンポーネントで

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

：

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; 

      } 

親コンポーネントのHTMLで

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