在Angular中，类型"HTMLDivElement"不能分配给类型"Node"

为了清楚起见，我所知道的关于Angular 的所有内容都是组件和少量的指令.如果我的问题需要更高级的主题，比如服务或其他什么，那么就让我知道.

这是我的文件夹 struct

这是我的应用程序组件HTML

 <app-game-control 
    [even] = "evenComponent"
    [odd] = "oddComponent">
</app-game-control>
<div class="outer"
    #outer>
      <div class="inner-even"
      #evenComponent>
        <app-even
          *ngFor="let value of even">
            {{value}} is Even
        </app-even>
      </div>

      <div class="inner-odd"
      #oddComponent>
        <app-odd
          *ngFor="let value of odd">
        {{value}} is Odd
        </app-odd>
      </div>
</div>

游戏控制TS文件

@Input() even?: HTMLDivElement
@Input() odd?: HTMLDivElement
@Input() outer?: HTMLDivElement

resetDisplay() {
    this.even?.remove()
    this.odd?.remove()
    // the next 2 lines are the problem
    this.outer?.appendChild(this.even) // it expects a Node, while I declared it as an HTMLDivElement
    this.outer?.appendChild(this.odd) // it expects a Node, while I declared it as an HTMLDivElement
    clearInterval(this.intervalFunction)
   }

现在，我知道ANGLE封装了DOM树.当我在游戏控制中访问outer并试图在App组件中操作DOM时，我想这不起作用.在本例中，我想在App组件的模板中添加偶数和奇数.我怎么能做到这一点？