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

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

2 个答案: