Question

在我们的项目中，我们拥有大量具有类似属性的控件。有没有办法让通用扩展添加这样的共享属性，以便可以在整个项目中单个位置进行更改？

例如，typeahead声明如下：

 <input type="text" name="certificate.title" class="form-control" [class.is-invalid]="invalid('certificate.title')" autocomplete="off" required
                   [(ngModel)]="editModel.certificate.title"
                   [typeahead]="getTypeahead(dt.Certification, editModel.certificate.title, true)"
                   (typeaheadOnSelect)="select($event, editModel.certificate)"
                   [typeaheadOptionsLimit]="10"
                   [typeaheadMinLength]="2"
                   typeaheadWaitMs="400"
                   typeaheadOptionField="title" 
                   typeaheadPhraseDelimiters=" "/>

和class，autocomplete，typeaheadOptionsLimit，typeaheadMinLength，typeaheadWaitMs和typeaheadPhraseDelimiters属性很常见。

使用一些通用的声明方法将所有常见属性添加到每个控件中会很棒，例如：

 <input type="text" name="certificate.title" [class.is-invalid]="invalid('certificate.title')" required
                   [(ngModel)]="editModel.certificate.title"
                   [typeahead]="getTypeahead(dt.Certification, editModel.certificate.title, true)"
                   (typeaheadOnSelect)="select($event, editModel.certificate)"
                   typeaheadOptionField="title" 
                   **attributeSet="GenericTypeahead"** />

作为奖励，能够覆盖属性会很棒。

Answer 1

您有几个选择：

您可以将全局选项放在环境文件中（dev和prod以及您定义的任何其他环境）。编译时，它们会更改为常规的js-functions / objects，因此您也可以在运行时更改它们的值。

或者您可以定义一个全局服务（在app.module的提供程序中使用），保存这些变量并将其注入您的应用程序以访问其getter。

或者您可以使用Redux（例如使用NGRX框架）并在应用程序中共享变量的核心/ app-redux存储。

对于在运行时更改的属性，我建议3），对于在编译时设置的属性，我建议1）。请注意，对于较大的应用程序，redux商店无论如何都被认为是一种很好的做法，从它的声音来看，你的应用程序很大。

角元素的通用属性集

1 个答案: