如何将一个组件的行为与另一个[Angular]分开

Question

我正在学习Angular。我从头开始创建了一个datepicker（*为什么从头开始是另外一个故事）。如您所见，我在同一个小部件中有两个日期选择器自定义组件。两者的代码相同。我只是复制并粘贴到同一HTML文件中。

这里是我的monthpicker.component.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来分离它们。但是他们两个仍然在共同回应。我希望他们独立行动。

请纠正我。

Answer 1

之所以这样，是因为您将两个输入与[ngModel]绑定到同一个变量，因此一个输入的变化会反映在另一个输入上。

Answer 2

尝试更改ngmodel值。

 <div class="year-div">
        <input type="number" [(ngModel)]="year" value="2019" min="2018" max="2024">
   </div>

如果为两个ngModel输入相同的值，它也会同时反映另一个值。因此您需要对ng-model使用不同的值。

Answer 3

请确保您清除与另一个日期选择的日期。使每个组件的“ ID”都不同。