如何为不同应用程序的 Angular 库中的按钮使用不同的标签？

Question

我有一个名为 lib-survey 的库，它使用 Angular Formly 并有一个查看调查的按钮。

 <div class="row-xs-12">
   <div class="col-xs-12">
      <formly-form
         #formly
         [options]="options"
         [model]="surveyModel"
         [fields]="currentFormlyFields"
         (modelChange)="modelChange($event)"
         [form]="form.form">
      </formly-form>
      <button
         class="btn btn-primary"
         type="submit"
         (click)="openReview()"> Review </button>
   </div>
 </div>

这个库就是这样在多个应用程序中使用的。

<lib-survey
   [appType]="app1"
   [appId]="1"
</lib-survey>

如何为不同的应用更改按钮的标签？

例如，在App1中使用时，按钮标签应为“Review Answer”，但在App2中，按钮标签应为“Review Survey".

Answer 1

这是Angular中典型的亲子交流用例。所以你可以在这种情况下使用 @Input 装饰器。

在按钮的component.ts声明一个变量，

@Input buttonLabel: string;

在HTML中使用相同的标签来插入按钮名称，

 <div class="row-xs-12">
   <div class="col-xs-12">
      <formly-form
         #formly
         [options]="options"
         [model]="surveyModel"
         [fields]="currentFormlyFields"
         (modelChange)="modelChange($event)"
         [form]="form.form">
      </formly-form>
      <button
         class="btn btn-primary"
         type="submit"
         (click)="openReview()">{{ buttonLabel }} </button>
   </div>
 </div>

现在，只要您使用按钮组件，只需传递按钮标签的名称即可，

<lib-survey
   [appType]="app1"
   [appId]="1"
   [buttonLabel]="Something"
</lib-survey>

如何为不同应用程序的 Angular 库中的按钮使用不同的标签？

How to use different labels for a button in Angular library for different application?

angular

angular-library