Angular按钮点击路由无响应，求助问题排查

核心问题梳理 #

你的路由跳转失效是由多个语法错误和配置问题共同导致的，具体如下：

1. routerLink属性绑定错误 #

原代码中routerLink="['/create-account']"的写法不符合Angular规范，属性绑定必须用方括号[]包裹，否则字符串会被当作字面量路径，无法解析为路由数组。

2. 点击事件语法错误 #

• Angular的点击事件是(click)而非(onClick)，不需要on前缀；
• 事件绑定中无需使用{{}}插值语法，直接传递变量即可，否则会导致表达式解析失败。

3. 路由路径拼写错误 #

路由配置里的eyelinder是拼写错误，应改为eyeliner，与组件名EyelinerComponent对应，否则点击对应按钮时找不到匹配路由。

4. router-outlet位置错误 #

router-outlet应放在根组件（app.component.html）中，Home作为路由组件会被渲染到根组件的router-outlet里，自身不需要再包含该标签。

5. 缺少默认路由配置 #

路由数组中未设置默认路由，导致应用启动后可能无法正确加载Home组件，或路径匹配异常。

修复后的代码示例 #

1. app-routing.module.ts（修复拼写+添加默认路由） #

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { CreateAccountComponent } from './create-account/create-account.component';
import { LoginComponent } from './login/login.component';
import { AboutComponent } from './about/about.component';
import { BlushComponent } from './blush/blush.component';
import { BronzerComponent } from './bronzer/bronzer.component';
import { ConcealerComponent } from './concealer/concealer.component';
import { EyelinerComponent } from './eyeliner/eyeliner.component';
import { EyeshadowComponent } from './eyeshadow/eyeshadow.component';
import { FoundationComponent } from './foundation/foundation.component';
import { HighlighterComponent } from './highlighter/highlighter.component';
import { LipglossComponent } from './lipgloss/lipgloss.component';
import { LipstickComponent } from './lipstick/lipstick.component';

const routes: Routes = [
  { path: '', redirectTo: '/home', pathMatch: 'full' }, // 添加默认路由
  { path: 'create-account', component: CreateAccountComponent },
  { path: 'login', component: LoginComponent },
  { path: 'about', component: AboutComponent },
  { path: 'loginRedirect', redirectTo: 'login' },
  { path: 'blush', component: BlushComponent },
  { path: 'bronzer', component: BronzerComponent },
  { path: 'concealer', component: ConcealerComponent },
  { path: 'eyeliner', component: EyelinerComponent }, // 修复拼写错误
  { path: 'eyeshadow', component: EyeshadowComponent },
  { path: 'foundation', component: FoundationComponent },
  { path: 'highlighter', component: HighlighterComponent },
  { path: 'lipgloss', component: LipglossComponent },
  { path: 'lipstick', component: LipstickComponent },
  { path: 'home', component: HomeComponent, pathMatch: 'full' },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

2. home.component.html（修复routerLink和点击事件） #

<body style="background-color:deeppink;">
  <button type="button" [routerLink]="['/create-account']">Create Account</button>
  <button type="button" [routerLink]="['/login']">Login</button>
  <button type="button" [routerLink]="['/about']">About</button>

  <header>
    <h1> MakeupFinder </h1>
    <h2> What kind of product are you looking for?</h2>
  </header>
  <ul>
    <li *ngFor="let makeup of makeup">
      <button (click)="click(makeup.name)">
        <img width="270px" height="280px" src="{{makeup.imageUrl}}">
        <div class="content">
          <div class="name">
            {{makeup.name}}
          </div>
        </div>
      </button>
    </li>
  </ul>
</body>

3. app.component.html（放置根router-outlet） #

<router-outlet></router-outlet>

额外检查项 #

• 确认AppRoutingModule已导入到AppModule中，否则路由配置不会生效；
• 确保makeup.name的值与路由路径完全匹配（大小写敏感），比如makeup.name是Eyeliner则需对应路由路径eyeliner，或统一大小写。

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