Параметры RouteLink в Angular 8 - PullRequest
Новая
       30

Параметры RouteLink в Angular 8

0 голосов
/ 01 октября 2019

У меня есть его маршрут, определенный в app.module 

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

Затем в моем app.component.ts, который загружает приложение, у меня есть этот 

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>

Но я получаю эту ошибку Uncaught Error: Ошибки синтаксического анализа шаблона: Ошибка Parser: Получена интерполяция ({{}}), где ожидалось выражение в столбце 20 в [[/ empleados]/ datos / ', {{añoActual}}, {{mesActual}}]] в ng: ///AppModule/AppComponent.html@5: 30 (

Любая идея, пожалуйста?

С уважением

Ответы [ 4 ]

1 голос
/ 01 октября 2019

Вы должны передать параметры маршрута следующим образом: 

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

Не анализировать URL. Пусть роутер это сделает. Маршрутизатор извлекает параметры маршрута из URL-адреса и передает их в ListaEmpleadosComponent через службу ActivatedRoute.

Маршрутизатор составляет целевой URL-адрес из массива следующим образом: localhost: 4200 / empleados / x / y.

Ссылка: https://angular.io/guide/router#setting-the-route-parameters-in-the-list-view

1 голос
/ 01 октября 2019

Ваш синтаксис неверен, вы должны передать переменную без кавычек, как это 

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

Но я бы порекомендовал вам изменить вашу переменную añoActual, чтобы она стала переменной алфавита без специального символа

0 голосов
/ 02 октября 2019

Проблема заключалась в названии переменной "añoActual". Если я использую actualYear, этот код работает нормально 

<li><a class='nav-link' 
[routerLink]="['/empleados',actualYear, actualMonth]">Empleados</a></li>
0 голосов
/ 01 октября 2019

попробуйте это 

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

Вы получите его в маршрутизируемом компоненте из активированного параметра маршрута, так как в качестве объекта JSON вы можете его проанализировать и использовать дальше.

...