0

我在我的 Angular 6 项目中有以下代码，其中我们显示切换器开关按钮类型为“活动”和“已完成”。

下面是相同的代码。在这里，我将页面加载时的默认选择设置为“活动”。and when select completed records it adds .active class to the existing class and color changes and once user clicks on any selection I do trigger event and my underlying component loads data based on input params I set on the component.

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

0 回答 0