Angular项目报changeMenuDisplay is not a function错误求助

你犯了Angular的基础概念错误：把组件的视图逻辑（属性、方法）写到了AppModule里，而不是对应的AppComponent中。

Angular的Module是用来组织应用结构、注册组件/服务、导入依赖的配置容器，而Component才是负责视图渲染、数据绑定、处理交互逻辑的载体。你的HTML模板属于AppComponent，它只能访问AppComponent类里的成员，自然找不到AppModule中的changeMenuDisplay方法，所以报错“changeMenuDisplay is not a function”。

修正步骤 #

1. 拆分AppModule与AppComponent

把原本写在AppModule里的属性、方法全部移到AppComponent（app.component.ts）中，让AppModule只保留配置内容：

修正后的AppModule：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';
import { AboutComponent } from './about/about.component';
import { FavVideoComponent } from './fav-video/fav-video.component';
import { PlaygroundComponent } from './playground/playground.component';

@NgModule({
  declarations: [
    AppComponent,
    AboutComponent,
    FavVideoComponent,
    PlaygroundComponent,
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

修正后的AppComponent（app.component.ts）：

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  public myLinks: {name: string, value: number}[] = [
    {name: "About", value: 0},
    {name: "Video", value: 1},
    {name: "Playground", value: 2}
  ]
  public currDisplay = "";
  public showMenu = false;

  switchContent(word: string) {
    this.currDisplay = word;
    // 可选：点击菜单选项后自动关闭菜单
    this.showMenu = false;
  }

  changeMenuDisplay() {
    this.showMenu = !this.showMenu;
  }
}

2. 修复HTML模板的逻辑错误

你的HTML还有两处逻辑问题，一并修正：

• *ngFor位置错误：应该放在<li>上，否则只会生成一个<li>包裹所有按钮
• 绑定参数错误：myLinks是对象数组，需要取word.name才能匹配ngSwitch的判断值

修正后的HTML：

<main>
    <section id="menuSection">
        <button
            class="menubutton"
            (click)="changeMenuDisplay()">
            {{showMenu ? "Close" : "Open"}} Menu
        </button>
        <nav *ngIf="showMenu">
            <ol>
                <li 
                    class="link"
                    *ngFor="let word of myLinks; let i=index">
                    <button
                        [name]="currDisplay"
                        (click)="switchContent(word.name)">
                        {{ word.name }}
                    </button>
                </li>
            </ol>
        </nav>
    </section>
    <section id="contentSection" [ngSwitch]="currDisplay">
        <app-about *ngSwitchCase="'About'"></app-about>
        <app-fav-video *ngSwitchCase="'Video'"></app-fav-video>
        <app-playground *ngSwitchCase="'Playground'"></app-playground>
        <div *ngSwitchDefault>
            <h1>Home</h1>
            <h2>Use the menu to click through the links.</h2>
        </div>
    </section>
</main>

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