如何区分一个组件和另一个组件的行为[角度]

我在学习。我创造了一个 datepicker 从头开始(*为什么从头开始是一个不同的故事)。正如你所见,我在同一个小部件中有两个日期选择器自定义组件。两者的代码相同。我只是复制并粘贴在同一个HTML文件中。

这是我的 蒙斯皮克。组成部分html

注: dls 是我们自己的基本html组件库,如文本字段等。请忽略这一点。

....
<div class="dropdown">
  <span>
    <dls-textbox id="upper">
        <input dlsInput [ngModel]="text" placeholder="...">
    </dls-textbox>
  </span>
  <div class="my-table-div dropdown-content">
    <div class="year-div">
        <input type="number" [(ngModel)]="year" value="2019" min="2018" max="2024">
    </div>
    <br>
    <div *ngFor="..." class="my-table">
      <span *ngFor="...">
        <span class="month-name" (click)="onClick(x);">
          {{ x.monthName }} 
        </span>
      </span>
    </div>
</div>

<!-- A TOGGLE SWITCH GOES HERE-->

<!-- THEN SAME DATE PICKER CODE I COPIED BELOW-->
<div class="dropdown">
  ...
</div>

但问题是,在一个日历中选择的日期也会反映在后一个日历中。

我试着通过改变 id 和 class 而且但他们两人仍在共同应对。我希望他们独立行动。

请纠正我。