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

Question

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

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

• 单击“创建客户”时，将显示客户详细信息弹出窗口，用户可以创建新客户。
• 当点击客户ID的链接时，客户详情弹出窗口将显示并加载客户信息到此弹出窗口中，用户可以更新此客户。

在customer-detail组件中，如何知道什么时候点击了“create customer”，什么时候点击了customer id，以便正确创建或更新客户？

在customer-detail组件中，当用户点击customer id时，如何从customer-list组件中获取customer id？

非常感谢。

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

点击创建客户

点击客户 ID

app.component.html

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

客户列表.component.html

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

customer-list.component.ts

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

customer-detail.component.html

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

customer-detail.component.ts

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

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>