Angular 8 中的 RouteLink 参数

Question

我在app.module

中定义了他的路线

{path:'empleados/:año/:mes', component:ListaEmpleadosComponent},

然后在我的 app.component.ts 那个 bootstrap 应用程序中我有这个

export class AppComponent {
tituloPagina = 'Parte de Horas';
fechaActual:Date=new Date();
mesActual:number=this.fechaActual.getMonth();
añoActual:number=this.fechaActual.getFullYear();
}

与模板关联：app.component.html

<nav class='navbar navbar-expand navbar-light bg-light'>
    <a class='navbar-brand'>{{tituloPagina}}</a>
    <ul class='nav nav-pills'>
      <li><a class='nav-link' [routerLink]="['welcome']">Home</a></li>
      <li><a class='nav-link' 
      [routerLink]="['/empleados',{{añoActual}},  {{mesActual}}]">Empleados</a></li>
      <label>{{fechaActual}}</label>
    </ul>
</nav>

<div class='container'>
  <router-outlet></router-outlet>
</div>

但是我得到这个错误未捕获的错误：模板解析错误：解析器错误：在 ng://[=33 中的 [[/empleados/datos/',{{añoActual}}, {{mesActual}}]] 中的第 20 列出现了插值 ({{}}) =].html@5:30 (

有什么想法吗？

此致

Answer 1

你的语法错误你应该像这样传递没有引号的变量

[routerLink]="['/empleados', añoActual,  mesActual]"

但我建议您将变量 añoActual 更改为没有特殊字符的字母变量

Answer 2

你应该像这样传递路由参数，

<a class='nav-link' 
  [routerLink]="['/empleados', añoActual, mesActual]">Empleados</a>

不要分析URL。让路由器来做。路由器从 URL 中提取路由参数，并通过 ActivatedRoute 服务将其提供给 ListaEmpleadosComponent。

路由器从数组中组成目标 URL，如下所示：localhost:4200/empleados/x/y。

参考：https://angular.io/guide/router#setting-the-route-parameters-in-the-list-view

Answer 3

试试这个

[routerLink]="['/empleados', {añoActual:añoActual ,  mesActual: mesActual}]"

您将从激活的路由参数中在路由组件中接收它作为 JSON 对象，您可以解析它并进一步使用。

Answer 4

问题是变量的名称"añoActual"如果我使用 actualYear，此代码可以正常工作

<li><a class='nav-link' 
[routerLink]="['/empleados',actualYear, actualMonth]">Empleados</a></li>

Angular 8 中的 RouteLink 参数

RouteLink parameters in Angular 8

javascript

single-page-application

typescript

angular

angular8