2016-12-07 12 views
1

У меня есть приложение Angular 2, которое я поддерживаю. Я очень, очень зеленый с Угловым 2, но стараюсь взять как можно больше учебников.Angular2 Обновить данные после действия

Модуль ввода текста страницы UI вызывает службу REST и загружает таблицу в init и отображает данные. У меня есть компонент Angular, который является частью этой страницы пользовательского интерфейса, которая вызывает другую службу REST, которая вносит изменения в одни и те же данные. Обновление контролируется с помощью кнопки на странице. После этого обновления мне нужно, чтобы отображаемые данные обновлялись. Поскольку компонент ts, который «управляет» всей страницей, отделен от компонента, который делает обновление, я не уверен, как это сделать.

У меня есть файл под названием 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> 

И второй компонент сообщение-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; 
    } 
} 

Когда я выбираю строку из таблицы, активируется кнопка «Повторить». Если я нажму на эту кнопку, он запустит метод повторной отправки в message-actions.componentent, который выполняет службу сообщений, которая обновляет эту запись в базе данных. Как только это произойдет, мне нужно запустить метод searchForMessage в message.component.

У меня нет понятия, как это осуществить. Пожалуйста помоги.

ответ

4

Пожалуйста, смотрите в официальном Угловое 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, он может затем запустить необходимый код для обновления ваших данных.

+3

Благодарим за предложение. Это привело меня к ответу. В моем случае это был не двунаправленный сервис. Это был ребенок для родительского события, которое мне нужно было создать. Проверьте, что «Родитель слушает дочернее событие» на этой странице. Это были решения .. – OldGuy

Смежные вопросы