Блог

У меня есть приведенный ниже код в моем проекте angular 6, в котором мы показываем кнопки переключения типа «Активны» и «Завершены».

Ниже приведен код для того же самого. здесь я устанавливаю значение по умолчанию «активный» при загрузке страницы. и когда выбираются завершенные записи, он добавляет .активный класс к существующему классу и меняет цвет, и как только пользователь нажимает на любой выбор, я запускаю событие, и мой базовый компонент загружает данные на основе входных параметров, которые я установил для компонента.

 <div class="d-flex flex-row flex-start switch-container mb-4">
  <div
    class="switch"
    [ngClass]="selectedGoals === 'active' ? 'active' : ''"
    (click)="onActiveGoalsClick()"
  >
    Active
  </div>
  <div
    class="switch"
    [ngClass]="selectedGoals === 'completed' ? 'active' : ''"
    (click)="onCompletedGoalsClick()"
  >
   Completed
  </div>
</div>
 

и событие, как показано ниже: в файле (. ts )

  selectedAction: string = "Active Records";
  public onActiveGoalsClick() {
    this.selectedGoals = "active";
  }
  public onCompletedGoalsClick() {
    this.selectedGoals = "completed";
  }
 

поскольку это будет распространено среди других компонентов, в которых внутренний текст будет изменен, а остальное останется прежним, может ли это быть случай угловой трансклюзии, или я могу создать отдельный общий компонент со свойством ввода и эмиттером событий, чтобы выполнить все, что нужно, если это может быть в случае использования, может ли кто-нибудь помочь мне в том, как лучше реализовать это с помощью трансклюзии?

Я начал делать это так, но я не уверен в том, как пользовательские события для других компонентов будут тесно связаны здесь. рассмотрим ниже в качестве общего компонента, который может быть реализован другими родительскими компонентами.

 <div class="d-flex flex-row flex-start switch-container mb-4">
  <div
    class="switch"
    [ngClass]="selectedGoals === 'active' ? 'active' : ''"
    (click)="onActiveGoalsClick()"
  >
    <ng-content></ng-content>
  </div>
  <div
    class="switch"
    [ngClass]="selectedGoals === 'completed' ? 'active' : ''"
    (click)="onCompletedGoalsClick()"
  >
    <ng-content></ng-content>
  </div>
</div>