Angular双列表框使特定条目只读

Question

我正在使用“angular-dual-listbox”，我想将 RHS 中的一个特定条目设为只读，以便用户无法删除所有组。如果有人知道，请帮忙

Answer 1

查看了source code.，它只是不受支持。

然而，文档确实描述了扩展组件的能力。这可以让您只添加一个小验证。

按照该建议，您可以快速创建如下内容。

import { Component } from '@angular/core';
import { DualListComponent } from 'angular-dual-listbox';
 
@Component({
    selector: 'custom-dual-list',
    templateUrl: './custom-dual-list.component.html',
    styleUrls: [ './custom-dual-list.component.scss' ]
})
export class CustomDualListComponent extends DualListComponent {

  moveItem(source: BasicList, target: BasicList, item: any = null, trueup = true) {

    if (this.canMoveItem(item)) super.moveItem(source, target, item, trueup);

  }

  canMoveItem(item: any): boolean {
    // add some logic here.
    return true; // or false
  }
}

但是，他们的文档假定您添加了自己的模板和 css 文件。你可以try to reference theirs 但这通常不是那么容易。一般来说，扩展组件在角度上从来都不是一件容易的事。组合比继承容易，但它不会给你足够的控制权。

老实说，由于这只是一个小组件，您最好只复制整个源代码。 （只有 3 个小文件）你肯定会在不到一个小时的时间内完成。

当然，您将丢失该组件的未来更新。因此，政治正确的做法可能是分叉他们的存储库，进行更改，然后发送拉取请求。最后在他们批准后，等待他们的下一个版本，然后安装更新的包。

因为这需要大量的时间和精力，所以最好只复制整个内容。