부품 안의 2 각형 구성 요소

Question

이제는 각도 2가 매우 멋지지만 여전히 문제가 있습니다. 것은, "미니보기 구성 요소"를 원합니다. 즉, 단추 또는 링크로 일부 항목 (예 : 고객)의 작은보기를 의미합니다. 예 : 판매 목록 (이 부분은 알아 내기 위해 mnanaged), 거기에 고객 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; 

     } 

모범 사례는 데 아이 컴포넌트 출력을 통해 모달 개방을 트리거 :

아이 컴포넌트에서 (BTW customermini하지, 그 모달이다 나는 가정) :

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

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

하위 구성 요소 HTML :

부모 구성 요소에서

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

: 부모 요소의 HTML

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