Angular: 单击按钮重定向到另一个页面无效

Question

在“市场”>“价值”页面中，我有一个名为“添加”的按钮，当用户单击此按钮时，用户会转到另一个页面。此页面名为 ajout。

结构如下

value.component.html

<div class="text-center">
    <button type="submit" class="btn btn-primary" (click)="btnAjout">Add</button>
</div>

value.component.ts

btnAjout(): void {
   this.router.navigateByUrl('/ajout');
}

市场-routing.module.ts

{
  path: 'value',
  component: ValueComponent,
},
{
  path: 'ajout', 
  component: AjoutComponent
},

ajout.component.html

<p>ajout works!</p>

ajout 页面打不开，是我弄错了吗？

Answer 1

问题 1：无法触发 btnAjout 方法

btnAjout 是一个函数。因此，对于 (click)="btnAjout"，它永远不会触发 btnAjout 函数。

<button type="submit" class="btn btn-primary" (click)="btnAjout">Add</button>

btnAjout(): void {
  ...
}

问题 1 的解决方案

更正点击事件。

<button type="submit" class="btn btn-primary" (click)="btnAjout()">Add</button>

问题 2：到 'market/ajout'

的路由不正确

从审查 DashboardRoutingModule 到 MarketingRoutingModule，（重定向）adjout 组件的 URL 应该是：

/market/adjout

而不是：

this.router.navigateByUrl('/ajout');

问题 2 的解决方案

更正 url 路径。

this.router.navigateByUrl('/market/ajout');

Angular: Click button to redirect to another page not working