材质标签中的Angular 6下拉菜单错误

Question

我有一个输入下拉组件，可在同一应用程序的多个位置但在不同的选项卡中使用。

我面临的问题是，当我从选项卡1的下拉列表中选择一个值并且用该值完成API调用时，选项卡2中的同一组件也使用选项卡1中的所选值来完成该操作。

在不同标签中订阅相同服务时，该如何解决？

<ng-select 
  [items]="Groups"
  [virtualScroll]="true"
  bindLabel="bg_desc"
  bindValue="bg_desc"
  placeholder="Groups"
  [(ngModel)]="selectedGroup"
  [clearable]="false"
  (change)="selectGroups()">
  <ng-template 
    ng-notfound-tmp 
    let-searchTerm="searchTerm">
    <div class="ng-option disabled">
      No data found for "{{searchTerm}}"
    </div>
  </ng-template>
  <ng-template 
    ng-option-tmp 
    let-item="item" 
    let-search="searchTerm">
    <div 
      [ngOptionHighlight]="search" 
      class="text-uppercase">
      {{item.bg_desc}}
    </div>
  </ng-template>
</ng-select>

这是在我的组件中：

selectGroups() {
  this._data.changeGroup(this.selectedGroup);
}

这是我的服务：

changeGroup(bg: string) {
  this.changeGroupData.next(bg);
}

private changeGroupData = new BehaviorSubject<string>('');
currentChangeGroupData = this.changeGroupData.asObservable();

这是我的stackbliz示例： https ://stackblitz.com/edit/angular-1oucud

我想在这些标签上单独打电话。 我是否应该使用不同的名称创建相同组件的三个实例以实现此目的？

Answer 1

考虑一下程序的体系结构吗？ DropDownComponent应该在模型更改后真正更新服务，还是更像是更具体的输入控件，并且任何绑定或应用程序逻辑都应该发生在它之外？

在我看来，第二种情况更合适，尤其是在您需要重用它的情况下。 您可以轻松地修改DropDownComponent使其具有输入和输出，并使外部组件绑定到该输入和输出。 或者，您可以加倍努力，让您的组件扩展NgModelAccessor，以便可以在表单中正确使用它。

我将在下面举例说明更简单的方法。

• DropDownComponent将更改为完全独立的。 它具有其他组件将绑定到的输入和输出。
• AppComponent有一个模型，模型的属性绑定到视图中下拉列表的实例。 出于特殊原因，我也绑定了change事件，只是为了向您展示发生了什么。 确实没有必要，因为执行框内香蕉式语法会使输出受约定约束-输出与输入名称相同，并在末尾附加Change。

DropDownComponent.ts

export class DropdownComponent  {
  colors = colors;

  @Input() selectedColor;
  @Output() selectedColorChange = new EventEmitter<string>();

  changeColor(e) {
    this.selectedColorChange.emit(this.selectedColor);
  }
}

AppComponent.ts

declare type ColorType = { color: string, value: string };

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  colors: { first?: ColorType, second?: ColorType, third?: ColorType } = {};

  doSomething(colorKey: string) {
    console.log(`The color changed was ${colorKey} with a value of ${this.colors[colorKey].value}.`)
  }
}

AppComponent.html

<mat-tab-group>
    <mat-tab label="First">
        <dropdown [(selectedColor)]="colors.first" (selectedColorChange)="doSomething('first')"></dropdown>
    <p>Selected Color is {{colors.first?.color}}</p>
    </mat-tab>
    <mat-tab label="Second">
        <dropdown [(selectedColor)]="colors.second" (selectedColorChange)="doSomething('second')"></dropdown>
    <p>Selected Color is {{colors.second?.color}}</p>
    </mat-tab>
    <mat-tab label="Third">
        <dropdown [(selectedColor)]="colors.third" (selectedColorChange)="doSomething('third')"></dropdown>
    <p>Selected Color is {{colors.third?.color}}</p>
    </mat-tab>
</mat-tab-group>

Answer 2

您只需要使用输出与外部组件进行通信即可。 而已

https://stackblitz.com/edit/angular-1oucud