在angular2中的事件传播+

Z时代
2024-01-10
分类：问答

我知道这个问题可能听起来很熟悉且重复，并且已经回答了很多次。请多多包涵。我只是因为我无法解决我的问题，尽管尝试在其他问题中表达的解决方案。在angular2中的事件传播+

我有一个组件<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() {} 
    ... 
... 
... 
}