Angular2 Aktualisieren Der Daten Nach Der Aktion
Habe ich eine Eckige 2-Anwendung, die ich unterstütze. Ich bin sehr, sehr grün, mit Winkel 2, aber versuchen, so viele tutorials wie möglich.
UI Seite Typoskript-Modul ruft einen REST-Dienst und lädt eine Tabelle auf init und zeigt die Daten an. Ich habe eine Eckige Komponente, der Teil, die Seite der Benutzeroberfläche, der ruft einen anderen REST-service, änderungen an den gleichen Daten. Das update wird gesteuert über eine Schaltfläche auf der Seite. Nach dem update Auftritt, muss ich für die angezeigten Daten aktualisiert werden. Da die ts-Komponente, die "Laufwerke" die gesamte Seite ist unabhängig von der Komponente, macht das update, ich bin mir nicht sicher, wie dies zu verwirklichen.
Habe ich eine Datei namens Nachricht.Komponente.ts. Diese Datei enthält
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;
}
}
Und die message.component.html Datei enthält:
<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>
Und die zweite Komponente Nachricht-Aktionen.Komponente.ts, die in der html-enthält:
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;
}
}
Wenn ich wählen Sie eine Zeile aus der Tabelle der "Erneut" - Schaltfläche aktiviert. Wenn ich auf die Schaltfläche, es wird mit der Methode erneut in Nachricht-Aktionen.Komponente führt den message-service, der updates, die Eintragung in die Datenbank. Wenn das passiert, muss ich laufen, die searchForMessage Methode in Nachricht.Komponente.
Ich nicht die geringste Ahnung, wie zu machen, dass passieren. Bitte helfen Sie.
InformationsquelleAutor OldGuy | 2016-12-07
Du musst angemeldet sein, um einen Kommentar abzugeben.
Bitte haben Sie einen Blick in das offizielle Angular 2 Kochbuch: https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#bidirektional-service
Sollten Sie einen Dienst erstellen, ist geteilt zwischen
message-actions.componentundmessage.component. Grundsätzlichmessage-actions.componentwird ein Ereignis ausgelöst, dassmessage.componentabonniert(gelesen Abonnements und Observablen). Wenn ein Ereignis erkannt wirdmessage.componentkann es dann führen Sie den erforderlichen code zu aktualisieren Sie Ihre Daten.InformationsquelleAutor borislemke