我有一个我支持的Angular 2应用程序。我对Angular 2非常非常环保，但尝试尽可能多的教程。
UI页面typescript模块调用REST服务并在init加载表并显示数据。我有一个Angular组件，该组件是该UI页面的一部分，该组件调用另一个对相同数据进行更改的REST服务。通过页面上的按钮控制更新。发生更新后，我需要刷新显示的数据。由于＆ts;驱动＆＃34;整个页面与进行更新的组件是分开的我不确定如何实现这一点。
我有一个名为 message.component.ts 的文件。该文件包含
import { OnInit, Component } from "@angular/core";
import { MessageService } from "./message.service";
import { ExchangeMessage } from "../shared/models/exchange-message";
import { HelperUtils } from "../shared/services/helper.service";
@Component({
selector: "message-search",
templateUrl: "./message.component.html"
})
export class MessageComponent implements OnInit {
// Table config
public messages: ExchangeMessage[];
public selectedMessage: ExchangeMessage;
public length: number = 0;
public createdDateFrom: Date;
public createdDateTo: Date;
public constructor(private messageService: MessageService,
private preferenceService: PreferenceService) {
}
public ngOnInit(): any {
this.searchForMessage();
}
public searchForMessage() {
this.archivedSearch = this.searchForArchived;
this.messageService.search(this.createdDateFrom, this.createdDateTo)
.subscribe(messages => {
this.messages = messages.data;
this.length = messages.count;
}, error => console.error(error));
}
public selectMessage(message: ExchangeMessage): void {
this.selectedMessage = message;
}
}
message.component.html 文件包含：
<div class="page-content">
<div class="page-header pull-left">
<h1>
<i class="fa fa-briefcase" aria-hidden="true"></i>
<strong>
<span>Message Viewer</span>
</strong>
</h1>
</div>
<div class="row">
<div class="col-xs-12">
<div class="row">
<div class="col-xs-12">
<div class="widget-box">
<div class="widget-header">
<h5>
<i class="fa fa-search" aria-hidden="true"></i>
Message Search
</h5>
</div>
<div class="widget-body">
<div class="widget-main">
<form (ngSubmit)="searchForMessage()" #messageSearchForm="ngForm">
<div class="row">
<div class="col-xs-12 col-sm-4">
<div class="form-group">
<date-range [(dateModel)]="createdDateFrom" [label]="'Created Date/Time From'" [isToDate]="false" [isRequired]="searchForArchived"></date-range>
</div>
<div class="form-group">
<date-range [(dateModel)]="createdDateTo" [label]="'Created Date/Time To'" [isToDate]="true" [isRequired]="searchForArchived"></date-range>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<div class="pull-right">
<button type="submit" class="btn btn-primary" [disabled]="!messageSearchForm.valid">
<i class="fa fa-search" aria-hidden="true"></i>
<span>Search</span>
</button>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<div class="widget-box">
<div class="widget-header">
<h5><i class="fa fa-table"></i>Messages</h5>
<div class="widget-toolbar" >
<div class="widget-button" *ngIf="selectedMessage && selectedMessage.outboundText">
<message-actions [message]="selectedMessage"></message-actions>
</div>
</div>
</div>
<div class="widget-body">
<div class="widget-main no-padding">
<div class="table-responsive">
<table class="table table-striped table-hover table-condensed table-selectable no-margin"
[mfData]="messages" #mf="mfDataTable">
<thead>
<tr>
<th>Message ID</th>
<th>Message Type</th>
<th>Inbound Message Format</th>
<th>I/O</th>
<th>Processing Status</th>
<th>To</th>
<th>From</th>
<th>Retry Count</th>
<th>Created Date/Time</th>
<th>Last Updated Date/Time</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let message of mf.data" (click)="selectMessage(message)" [ngClass]="{'active' : message == selectedMessage}">
<td>{{message.exchangeId}}</td>
<td>{{message.messageType}}</td>
<td>{{message.messageFormat}}</td>
<td>{{message.incomingOutgoingIndicator}}</td>
<td>{{message.processingStatus}}</td>
<td>{{message.to}}</td>
<td>{{message.from}}</td>
<td>{{message.retryCount}} / {{maxRetryCount}}</td>
<td>{{formatDate(message.createdDate)}}</td>
<td>{{formatDate(message.updatedDate)}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
第二个组件 message-actions.component.ts 在html中用作包含：
import { Component, Input } from "@angular/core";
import { Action } from "../shared/manage-actions/action";
import { MessageService } from "./message.service";
import { ExchangeMessage } from "../shared/models/exchange-message";
import { NotificationService } from "../shared/services/notification.service";
import { ErrorDTO } from "../shared/models/error-dto";
@Component({
selector: 'message-actions',
template: '<manage-actions [actions]="messageActions"></manage-actions>'
})
export class MessageActionsComponent {
private _message: ExchangeMessage;
public messageActions: Array<Action> = [];
constructor(private messageService: MessageService,
private notificationService: NotificationService) {}
@Input()
set message(message: ExchangeMessage) {
this._message = message;
this.messageActions = [];
if (this._message) {
// Add Resubmit action
this.messageActions.push(new Action('Resubmit', () => this.resubmitMessage());
}
}
public resubmitMessage(): void {
if (this._message) {
this.messageService.resubmitMessage(this._message.exchangeId).subscribe(response => {
this.notificationService.success(response.message);
},
error => {
if (error.status === 400) {
let errorDto: ErrorDTO = error.json();
this.notificationService.error(errorDto.message);
} else {
console.error(error);
}
});
}
}
get message() {
return this._message;
}
}
当我从表中选择一行时，＆＃34;重新提交＆＃34;按钮激活。如果单击该按钮，它将在 message-actions.component 中运行重新提交方法，该方法将执行更新数据库上该条目的消息服务。一旦发生这种情况，我需要在 message.component 中运行searchForMessage方法。
我不知道如何实现这一目标。请帮忙。
答案 0 :(得分：4)
请查看官方的Angular 2食谱：https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#bidirectional-service
您应该创建一个在message-actions.component和message.component之间共享的服务。基本上，message-actions.component将触发message.component订阅的事件（读取订阅和可观察对象）。每当message.component检测到某个事件时，它就可以运行必要的代码来刷新您的数据。