在angular2中的事件傳播+

Question

我知道這個問題可能聽起來很熟悉且重複，並且已經回答了很多次。請多多包涵。我只是因爲我無法解決我的問題，儘管嘗試在其他問題中表達的解決方案。

我有一個組件<od-resource-table [..] [..]></od-resource-table>在頁面中呈現2次。它基本上是一個表格，並附帶控件來顯示/隱藏列。我面臨的問題是，當我試圖隱藏第二個表中的列時，它會影響第一個表，而不是我想要的表。如果我刪除第一個表，那麼沒有問題。請指教。我錯過了什麼在此先感謝。

這裏的發射

onChange(event: MouseEvent, field: string) { 
     this.onToggleColumnVisibility.next(field) 
     event.stopPropagation(); 
    } 

這裏的GIF展示的行爲

代碼

http://g.recordit.co/AoKbazXdr2.gif

搜索控制組件包含列選擇器控制

@Component({ 
    selector: 'od-search-control', 
    templateUrl: './search-control.component.html', 
    styleUrls: ['./search-control.component.scss'], 
    changeDetection: ChangeDetectionStrategy.OnPush, 
    encapsulation: ViewEncapsulation.None 
}) 
export class SearchControlComponent { 
    @Input() searchText: string = ''; 
    @Input() searchPlaceholder: string = 'Search'; 
    @Input() downloadUrl: any = ''; 
    @Input() columnPickerDefs: Array<ISearchControl.ColumnPickerDef> = []; 

    @Output() onRefresh = new EventEmitter<any>(); 
    @Output() onToggleColumnVisibility = new EventEmitter<any>(); 
    @Output() onTextChange = new EventEmitter<any>(); 

    constructor() { } 

    onChange(event: MouseEvent, field: string) { 
     event.stopPropagation(); 
     this.onToggleColumnVisibility.next(field) 
    } 
} 

個資源表組件

<div class="od-search-controls-bar"> 
     <div class="header"> 
     <h3> 
      <span class="page-title">{{title}}</span> 
      <span class="estimate">{{(estimate$ | async) | lpad : 2 : '0'}}</span> 
     </h3> 
     <div class="search-control-bar-wrapper"> 
      <od-search-control 
      ... 
      ... 
      ... 
      (onToggleColumnVisibility)="onToggleColumnVisibility($event)" 

      ></od-search-control> 
     </div> 
     </div> 
    </div> 
    <od-data-table 
     #resTable 
     [columnDefs]="columnDefs" 
     [rowData]="rowData$ | async" 
     [estimates]="estimate$ | async" 
     [currentPage]="currentPage$ | async" 
     [itemsPerPage]="itemsPerPage$ | async" 
     (onPageChange)="onPageChange($event)"  
     (sortModel)="onSort($event)" 
    ></od-data-table> 
@Component({ 
    selector: "od-resource-table", 
    templateUrl: "./resource-table.component.html", 
    styleUrls: ["./resource-table.component.scss"], 
    changeDetection: ChangeDetectionStrategy.OnPush 
}) 
export class ResourceTableComponent implements OnInit, OnDestroy, OnChanges { 
    @Input() category: string; 
    ... 
    ... 
    onToggleColumnVisibility(columnField: string) { 
    let columnIndex = this.columnDefs.findIndex(col => col.field === columnField); 
    if (columnIndex > -1) { 
     this.columnDefs[columnIndex].hide = !this.columnDefs[columnIndex].hide; 
     this.columnDefs = [...this.columnDefs]; 
    } 
    } 

} 

含有第2個表

@Component({ 

    selector: 'od-resource-assignment-view', 
    template: ` 
    <div class="resource-navigation-panel"> 
     <label class="active" 
      routerLink="/console-settings/resource-groups/" 
     >Resource Groups</label> 
     <label class="text-ellipsis"><span class="active">/</span>{{resourceGroupName}}</label> 
    </div> 
    <div class="assignment-resource-wrapper"> 
     <od-resource-table #assignedResourcesTable 
     [resources]="(resourceGroupType$ | async)" 
     [resourceGroupId]="resourceGroupId" 
     [enableNodeSelection]="true" 
     title="Assigned Resources" 
     category="resource group"> 
     </od-resource-table> 
     <div class="assign-button-wrapper"> 
     <button type="button" class="btn btn-secondary" (click)="unassignResources()"> 
      DEASSIGN 
     </button> 
     </div> 
    </div> 
    <div> 
     <od-resource-table #enterpriseResourcesTable 
     [resources]="(resourceGroupType$ | async)" 
     [enableNodeSelection]="true" 
     [exclude]="(excludeResources$ | async)" 
     title="Total Resources" 
     category="enterprise"> 
     </od-resource-table> 
     <div class="assign-button-wrapper"> 
     <button type="button" class="btn btn-secondary" (click)="assignResources()"> 
      ASSIGN 
     </button> 
     </div> 
    </div> 
    `, 
    styleUrls: ['./resource-assignment-view.component.scss'], 
    changeDetection: ChangeDetectionStrategy.OnPush, 
    encapsulation: ViewEncapsulation.None 
}) 
export class ResourcesAssignmentViewComponent implements OnInit, OnDestroy { 
    @Input() resourceGroupId: string; 
    @Input() resourceGroupName: string; 
    @ViewChild('assignedResourcesTable') assignedResourcesTable: ResourceTableComponent 
    @ViewChild('enterpriseResourcesTable') enterpriseResourcesTable: ResourceTableComponent 
    resourceGroupType$: Observable<string> 
    excludeResources$: Observable<string[]> 
    resourceGroup: IResourceGroups.ResourceGroupItem 
    _subs: Subscription[] = new Array<Subscription>() 

    constructor(private _store: Store<IResourceGroups.ResourceGroupsState>) { } 

    ngOnInit() {} 
    ... 
... 
... 

} 

Answer 1

這是因爲這兩個表的使用的onChange相同的實例，當執行動作，所述第一表接收該事件首先在偵聽器中執行event.stopPropagation(); 。

解決方案： 嘗試區分偵聽器中的表（onChange）或使用偵聽器的單獨實例。