Блог

У меня есть библиотека с именем lib-survey, которая использует угловую форму и имеет кнопку для просмотра опроса.

  <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>
 

Как я могу изменить метку кнопки для разных приложений?

Например, при использовании в приложении 1 метка кнопки должна быть «Ответ на обзор», но для приложения 2 метка кнопки должна быть «Обзор опроса«.

Это типичный пример использования связи между родителями и детьми в 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>