Question

好的，Angular 2现在看起来很酷，但我仍然遇到麻烦。问题是，我想要＆＃34;迷你视图组件＆＃34;，意味着某个项目（例如客户）的小视图作为按钮或链接。示例：销售清单（这部分我需要弄清楚），它包含一个客户的字段，而不是仅在那里显示客户ID，我希望它是一个按钮，当点击一个模态窗口（bootstrap模式））会显示客户的详细信息。同样的行为也适用于供应商，产品等。我试图做一个＆＃34; customermini＆＃34;零件。我将客户代码作为指令传递，按钮触发＆＃34; getCustomer＆＃34;，它会触发服务方法并获取客户。这一切都是平庸的＃34;问题是，这个＆＃34; minicustomer＆＃34;组件，它的插值与对象得到了＆＃34; getCustomer＆＃34;方法。但每当插值＆＃34;触发＆＃34;我收到一个错误。所以问题是：这种情况的最佳方法是什么？我想要这个＆＃34; mini＆＃34;在整个应用程序中随处可用的组件，因为有许多＆＃34; thingies＆＃34;列表中的内容只是一个id，但我希望它们可以查看＆＃34;。而且比你提前。

编辑：添加一些代码：

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

}

客户：

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中，有对象的插值标签＆＃34; Cliente＆＃34;这是客户。

Answer 1

简单的回答是根据状态隐藏customermini。单击时，将显示。

user_id                      int64
date                datetime64[ns]
source                      object
device                      object
browser_language            object
ads_channel                 object
browser                     object
conversion                   int64
test                         int64
sex                         object
age                        float64
country                     object
dtype: object

如果它是必须动态生成/启动的模态组件，那么您需要在父组件或子组件中打开模态并将数据传递给lanuches（ng2-ui-bootstrap）并添加的函数/方法那些在app模块中的“entryComponents：[]”的模态组件，同时在html中的某个地方。在单击按钮之前，不会创建模态或加载数据。我的模态库是“ng2-ui-bootstrap”又名Angular 2 bootstrap的一部分。

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

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

在我的组件中：

  <template ngbModalContainer></template>


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

最佳做法是让子组件通过输出触发模态打开：

在子组件中（不是customermini btw，这是我假设的模态）：

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;

      }

Child Component的HTML：

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

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

在父组件中：

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

在父组件的HTML

中

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;

          }

组件内部的Angular 2组件

1 个答案: