Question

我使用的是Angular 4.我有2个组件，它们是客户列表和客户详细信息。

customer-list显示客户列表。在这个组件中，

点击＆＃34;创建客户＆＃34;时，将显示客户详细信息弹出窗口，用户可以创建新客户。
单击客户ID链接时，客户详细信息弹出窗口将显示并将客户信息加载到此弹出窗口中，用户可以更新此客户。

在客户详细信息组件中，如何知道＆＃34;创建客户＆＃34;单击客户ID时单击，以便我可以正确创建或更新客户？

在客户详细信息组件中，如何在用户点击客户ID时从客户列表组件中获取客户ID？

非常感谢。

这是我的代码。请看一下。

点击创建客户

点击客户ID

app.component.html

＆＃13;

<header>   
</header>
<main>
    <div class="main-content">
        <h3 class="page-heading">Customers</h3>
        <customer-list></customer-list>
    </div>
    <customer-detail></customer-detail>
</main>

＆＃13;

客户list.component.html

＆＃13;

<div class="row">
    <div class="col-md-6">
        <button class="btn btn-primary" data-toggle="modal" data-target="#customer-detail"><i class="fa fa-plus"></i> Create customer</button>
    </div>
    <div class="col-md-6">
        <form class="form-inline pull-right">
            <div class="form-group">
                <div class="input-group">
                    <input type="text" class="form-control" name="searchTerm" [(ngModel)]="searchTerm" placeholder="Search customer">
                </div>
            </div>
            <button type="submit" class="btn btn-primary" (click)="onSearchClicked()"><i class="fa fa-search"></i> Search</button>
        </form>

    </div>
</div>
<table class="table">
    <thead>
        <tr>
            <th>Id</th>
            <th>Reference</th>
            <th>Last Name</th>
            <th>Middle Name</th>
            <th>First Name</th>            
        </tr>
    </thead>
    <tbody>
        <tr *ngFor="let customer of customers">
            <td><a href="#" data-toggle="modal" data-target="#customer-detail" >{{ customer.id }}</a></td>
            <td>{{ customer.reference }}</td>
            <td>{{ customer.lastName }}</td>
            <td>{{ customer.middleName }}</td>
            <td>{{ customer.firstName }}</td>
        </tr>
    </tbody>
</table>

＆＃13;

客户list.component.ts

＆＃13;

import { Component } from '@angular/core';
import { Http } from '@angular/http';
import { Customer } from './customer';
import { CustomerService } from './customer.service';

@Component({
    selector: 'customer-list',
    templateUrl: './customer-list.component.html',
    providers: [CustomerService]
})
export class CustomerListComponent {
    public customers: Customer[] = [];
    public searchTerm: string;

    constructor(private customerService: CustomerService) {       
    }

    onSearchClicked(): void {
        this.customerService.searchSimilarCustomers(this.searchTerm)
            .subscribe(customers => {
                this.customers = customers;
            });
    }
}

＆＃13;

客户detail.component.html

＆＃13;

<div class="modal fade" role="dialog" tabindex="-1" id="customer-detail">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span>
                </button>
                <h4 class="modal-title">Create PL customer</h4>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-md-3">
                        <div class="form-group">
                            <label for="lastName">Last name</label>
                            <input type="text" class="form-control" name="lastName" [(ngModel)]="lastName" placeholder="Last name">
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="form-group">
                            <label for="middleName">Middle name</label>
                            <input type="text" class="form-control" name="middleName" [(ngModel)]="middleName" placeholder="Midddle name">
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="form-group">
                            <label for="firstName">First name</label>
                            <input type="text" class="form-control" name="firstName" [(ngModel)]="firstName" placeholder="Last name">
                        </div>
                    </div>                    
                </div>                
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary" (click)="saveCustomer()" data-dismiss="modal">Create</button>
            </div>
        </div>
    </div>
</div>

＆＃13;

客户detail.component.ts

＆＃13;

import { Component, Input, OnInit } from '@angular/core';
import { UUID } from 'angular2-uuid';

import { CustomerResource } from './customer';
import { ResourceData } from './customer';
import { CustomerService } from './customer.service';

@Component({
    selector: 'customer-detail',
    templateUrl: './customer-detail.component.html',
    providers: [CustomerService]
})
export class CustomerDetailComponent implements OnInit {
    modalTitle: string;    
    customerId: string;
    reference: string;
    lastName: string;
    middleName: string;
    firstName: string;
    
    constructor(private customerService: CustomerService) {        
    }

    ngOnInit() {        
    }

    registerCustomer() {
        let customerId = UUID.UUID();
        this.saveCustomer(customerId);
    }

    editCustomer() {
        this.saveCustomer(this.customerId);
    }

    saveCustomer(customerId: string) {
        let customerResource = this.mapToCustomerResource(customerId);
        this.customerService.registerCustomer(customerResource);
    }

    private mapToCustomerResource(id: string): CustomerResource {
        return {            
			//map customer
        };
    }   
}

＆＃13;

Answer 1

首先，您需要使用用户的ID导航到他的详细信息页面。为此，您需要在HTML中使用以下内容：

<tbody>
        <tr *ngFor="let customer of customers">
            <td><a [routerLink]="['/', { outlets: { popup: 'customer-detail/'+ customer.id + '/edit'} }]" data-toggle="modal" data-target="#customer-detail" >{{ customer.id }}</a></td>
            <td>{{ customer.reference }}</td>
            <td>{{ customer.lastName }}</td>
            <td>{{ customer.middleName }}</td>
            <td>{{ customer.firstName }}</td>
        </tr>
    </tbody>

然后在你的customer.route.ts：

export const customerDialogRoute: Routes = [
  {
    path: 'customer-new',
    component: CustomerDetailComponent,
    outlet: 'popup'
  },
  {
    path: 'customer-detail/:id/edit',
    component: CustomerDetailComponent,
    outlet: 'popup'
  }
];

从上面的代码中可以看出，您可以使用相同的组件进行创建和更新。在您的CustomerDetailComponent中，您可以从当前路径获取参数，如果该ID存在，您将获得客户的所有信息并进行更新。如果id不存在，那么你就必须创建一个新客户。

在HTML中，您只需要用户* ngIf：

<h4 class="modal-title" *ngIf="!customer.id">
    Create a new customer
</h4>
<h4 class="modal-title" *ngIf="customer.id">
    Update customer
</h4>

如何将数据加载到Angular 4中另一个组件的模态中？

1 个答案: