Angular12迁移TypeScript报TS2339:AppComponent不存在add_element属性

报错根因 #

你触发TS2339错误的核心原因有3个：

• 模板与组件不匹配：你定义的AddComponent组件关联的是add.component.html，但报错指向app.component.html，说明你把点击按钮的代码写在了根组件AppComponent的模板里，而AppComponent类本身没有定义add_element方法
• 函数定义冗余冲突：AddComponent里同时存在两个同名逻辑的定义，一个是赋值给addElement属性的匿名函数，另一个是直接抛错的空实现add_element，逻辑完全冲突
• 原生DOM操作不符合Angular规范，容易触发额外类型报错

修复步骤 #

1. 确认模板归属：如果逻辑写在AddComponent里，就把对应的HTML代码移到add.component.html中，不要放在根组件模板里；如果需要放在根组件，就把逻辑迁移到AppComponent类中
2. 清理冗余函数定义，合并逻辑到同一个add_element方法中
3. 用Angular提供的ViewChild替代原生document.getElementById操作DOM，规避类型错误

修正后代码 #

add.component.html #

<input type="text" #resultInput>
<input type="button" value="ADDDD" (click)="add_element()">
<div #dispContainer></div>

add.component.ts #

import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';

@Component({
  selector: 'app-add',
  templateUrl: './add.component.html',
  styleUrls: ['./add.component.css']
})
export class AddComponent implements OnInit {
  @ViewChild('resultInput') resultInput!: ElementRef<HTMLInputElement>;
  @ViewChild('dispContainer') dispContainer!: ElementRef<HTMLDivElement>;
  // 数组提升为组件属性，避免每次调用方法被重置
  data: string[] = [];

  constructor() { }

  ngOnInit(): void {
  }

  add_element(): void {
    const inputVal = this.resultInput.nativeElement.value.trim();
    if (inputVal) {
      this.data.push(inputVal);
    }
    // 清空输入框
    this.resultInput.nativeElement.value = '';
    // 示例传入2行2列的参数，可根据业务需求调整
    this.disp(2, 2);
  }

  // 抽离展示逻辑为私有方法
  private disp(row1: number, col1: number): void {
    let str = `total number of elements in data array : ${this.data.length}<br>`;
    const maxCount = row1 * col1;
    if (this.data.length <= maxCount) {
      for (let i = 0; i < this.data.length; i++) {
        str += `${i}: ${this.data[i]}<br>`;
      }
      this.dispContainer.nativeElement.innerHTML = str;
    }
  }
}

额外说明 #

如果需要在根组件页面展示该功能，只需在AppModule的declarations数组中注册AddComponent后，在app.component.html里加入<app-add></app-add>标签即可，无需复制逻辑到根组件。

内容的提问来源于stack exchange，提问作者prem kumar