在角度2中的各個組件之間共享事件驅動的變量

Question

我有一個包含數據表的組件，該數據表是使用管道過濾的，

我觸發並向管道發送新參數的方式是在input標簽上的input-event上，我在'targetInput'變量中捕獲輸入，

上面的設置有效，如下所示：

        <tr >
            <td  *ngFor="let column of currentView.columns">
                <div *ngIf="column.label">
                    <input placeholder="{{column.label}}" id="{{column._devName}}" type="text"
                           (input)="targetInput = {targetValue:$event.target.value,targetId:$event.target.id,currentFilterMap:currentFilterMap}">
                </div>
            </td>
        </tr>

        <ng-container *ngFor="let task of (currentView.tasks | countryPipe:targetInput); let i=index">
            <tr class="worktask" (click)="setCurrentTask($event, task)" (dblclick)="openWindowNewTab(getOpenTaskURL(task, currentView.process))"
                id="workspace_table_wo_{{ task.workOrderId }}_task_{{ task.taskId }}"
                [class.table-active]="isSelected(task)">
                <td *ngFor="let column of currentView.columns">{{task[column.devName]}}</td>
            </tr>

現在，我決定要為input標簽使用一個單獨的組件，因此我拆分了html並進行了父子設置，並使用@Input裝飾器傳遞了共享變量，

這是新設置的外觀，父html：

    <tr >
        <td  *ngFor="let column of currentView.columns">
            <filterTagBox [taskCol] = "column" [currentFilterMap] = "currentFilterMap"></filterTagBox>
        </td>
    </tr>
    <ng-container *ngFor="let task of (currentView.tasks | countryPipe:targetInput); let i=index">
        <tr class="worktask" (click)="setCurrentTask($event, task)" (dblclick)="openWindowNewTab(getOpenTaskURL(task, currentView.process))"
            id="workspace_table_wo_{{ task.workOrderId }}_task_{{ task.taskId }}"
            [class.table-active]="isSelected(task)">
            <td *ngFor="let column of currentView.columns">{{task[column.devName]}}</td>
        </tr>

現在，我似乎無法在輸入事件中將targetInput從子組件傳遞回父組件，不知道這是應該實現的方式還是有更好的方式。

Answer 1

我認為在您的情況下，parent是Parent html，child是filterTagBox。 如果要將值從父母轉移到孩子，則需要使用@input

如果要將值從子級轉移到父級，則需要使用EventEmitter和@Output

更多信息。 https://angular.io/docs/ts/latest/cookbook/component-communication.html

Answer 2

我使用BehaviorSubject通知任何訂閱該組件的組件（您所處的父組件）。 這是一種特殊的可觀察性。 消息服務可以為您做這件事。 定義消息模型（如果願意，甚至可以使用簡單的字符串）並創建消息服務：

import {Observable, BehaviorSubject} from 'rxjs/Rx'; // 
import {Message} from "../../models/message";        // Your model

... inside your message service class:

private _newMessage = new BehaviorSubject<Message>(new Message);
getMessage = this._currentUser.asObservable();
sendMessage(message: Message) { this._newMessage.next(message) }

在組件中（例如在父組件中），您可以訂閱getMessage主題，如下所示：

this.messageService.getMessage.subscribe(
message => {
    // a message received, do whatever you want
    if (message == "so important message")
      this.list = newList;
    // ... so on
});

這樣，多個組件可以訂閱此BehaviorSubject ，並且任何使用sendMessage方法的組件/服務中的任何觸發器都可以立即更改這些訂閱的組件。 對您來說，這可以是子組件：

... you successfully made something in your
... child component, now use the trigger:

this.messageService.sendMessage(new Message("so important message", foo, bar));

Answer 3

感謝您的回答，我確實弄清楚了如何做到這一點，盡管我發現使用行為服務很有趣，但我還是決定使用輸出變量將數據從子組件發送到父組件，最終將其發送到管道，

這是我所做的：

子組件HTML：

                <div *ngIf="taskCol.label">
                    <div id="{{taskCol._devName}}_tagBox"></div>
                    <input placeholder="{{taskCol.label}}" id="{{taskCol._devName}}" type="text"
             <!-- Call childComponent.onInput passing event parameters -->              

   (input)="onInput({targetValue:$event.target.value,targetId:$event.target.id})"> 
                </div>

子component.ts：

@Component({
  selector: 'filterTagBox',
  template: require('./filterTagBox.component.html')
})
export class FilterTagBox{

  private colValues:string[];
  public containsQueries:boolean;
  private regex:RegExp;
  @Input() public taskCol:TaskColumn;                          

  @Output() onItemInput = new EventEmitter<any>();   // bound event to the parent component

  // constructor and other hidden methods...

  onInput(targetInput : any){
    this.onItemInput.emit(targetInput);            //trigger  onItemInput event on inputBox input 
  }


}

父組件html：

<tr >
                <td  *ngFor="let column of currentView.columns">
                     <!-- Catch custom onItemInput event which was triggered in the child -->
                    <filterTagBox (onItemInput)="filterBoxPipeData = {targetValue:$event.targetValue,targetId:$event.targetId,currentFilterMap:currentFilterMap}"  [taskCol] = "column" ></filterTagBox>
                </td>
            </tr>

            <!--sent the data retrieve from the input i.e filterBoxPipeData to the pipe i.e tagBoxFilterPipe along with data to be filtered i.e currentView.task -->
            <ng-container *ngFor="let task of (currentView.tasks | tagBoxFilterPipe:filterBoxPipeData); let i=index">
                <tr> 
                <!--hidden html -->
                </tr>