Angular报错Property 'openbtn' does not exist on type

你遇到这个报错的核心原因是：Angular模板中通过(click)绑定的事件处理函数，必须是对应组件类实例上存在的属性/方法。你写的openbtn是定义在外部JS文件里的全局函数，没有挂载到HeaderComponent类上，模板找不到对应方法就会抛出类型错误。
另外你现在的逻辑本身还有冗余问题：你在ngOnInit里调用openbtn()的作用是给burger元素绑定点击切换类的事件，同时又在模板里给同一个元素绑定click调用openbtn()，会导致第一次点击只执行事件绑定、不会切换样式，第二次点击才会触发类切换的异常逻辑。

方法1：使用Angular原生写法（推荐，无需外部JS） #

完全符合Angular开发规范，不需要操作原生DOM，也不会出现时序问题、类型报错：

1. 移除angular.json里对nav.js的引入，删除组件里对openbtn的declare声明
2. 修改header.component.ts，添加状态属性和切换方法：

import { Component } from '@angular/core';

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.css'],
})
export class HeaderComponent {
  isBurgerActive = false;

  toggleBurgerState() {
    this.isBurgerActive = !this.isBurgerActive;
  }
}

3. 修改模板里的图片标签，用Angular内置的类绑定控制active类，点击事件绑定组件自身的方法：

<img
    src="https://myimage.png"
    width="32"
    alt="!"
    class="burger"
    [class.active]="isBurgerActive"
    (click)="toggleBurgerState()"
  />

方法2：保留外部JS的修改方案 #

如果你必须使用外部引入的原生JS逻辑，按如下步骤修改：

1. 修正nav.js里的冗余逻辑，去掉嵌套的事件绑定，直接在函数里执行类切换：

function openbtn() {
  const burger = document.getElementById('burger');
  burger?.classList.toggle('active');
}

2. 修改header.component.ts，把全局声明的openbtn函数挂载到组件实例上，让模板可以访问到，同时删除ngOnInit里的openbtn()调用（不需要提前绑定事件）：

import { Component } from '@angular/core';
declare function openbtn(): void;

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.css'],
})
export class HeaderComponent {
  // 挂载全局函数到组件实例
  openbtn = openbtn;
}

3. 模板里的点击绑定不需要改动，但是要注意：这种原生DOM操作的写法在元素未渲染完成时可能拿到null，不符合Angular的最佳实践，非必要不使用。

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