如何将一个组件的行为与另一个组件分开 [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

确保您应该用另一个日期清除您选择的日期。 Make "ID" 每个组件应该不同。

Answer 2

尝试更改 ngModel 值。

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

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

Answer 3

发生这种情况是因为您使用 [ngModel] 将两个输入绑定到同一个变量，因此一个中的更改会反映到另一个中。

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

How to separate behavior of one component from the other [Angular]

html

dom

angular-components

angular