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

【问题标题】：How to separate behavior of one component from the other [Angular]如何将一个组件的行为与另一个 [Angular] 分开
【发布时间】：2020-03-31 03:28:20
【问题描述】：

我正在学习 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 将它们分开。但他们两个仍然一起回应。我希望他们独立行动。

请纠正我。

【问题讨论】：

看起来它正在发生，因为您使用 [ngModel] 绑定到相同的变量
@NicholasK。好的，让我更改变量，然后再试一次。我会告诉你。谢谢。
是的。有效。就我而言，这是一个愚蠢的错误。对此感到抱歉。将此作为答案发布，以便我接受。

标签： html angular dom angular-components

【解决方案1】：

确保您应该清除您选择的另一个日期。使每个组件中的“ID”应该不同。

【讨论】：

这将是因为绑定.. [ngModel] 应该不同。此外，您为获取日期而传递的变量也应该不同。
这个问题已经得到解答，感谢您的帮助。谢谢

【解决方案2】：

尝试更改 ngModel 值。

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

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

【讨论】：

【解决方案3】：

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

【讨论】：