Как генерировать разные ссылки на router из ng для созданных элементов? - PullRequest
Новая
       26

Как генерировать разные ссылки на router из ng для созданных элементов?

0 голосов
/ 22 декабря 2018

Я использую ngFor (в "list-component") для отображения нескольких "item-component", и я хочу отправить пользователя в "item-detail-component", когда он нажимает на один из этих элементов.

Проблема в том, что я все еще рано изучаю Angular, и я не понимаю логику этих routerLinks, которой даже не существует в моей голове.

Я пытался получить "id"из моих предметов с let i = index, но я не знаю, что делать с i после этого шага.

Может кто-нибудь помочь мне в этой проблеме?Большое спасибо!

liste-actus HTML 

<div class="container list-group">
  <a *ngFor="let actu of actus | async; let i = index" class="list-group-item list-group-item-action flex-column align-items-start" routerLink="">
     <app-item-actus [actu]="actu"></app-item-actus>
  </a>
  <br>
</div>

liste-actus TS 

import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs';
import { ActivatedRoute } from '@angular/router';

import { ActuService } from 'src/app/services/actu.service';
import { Actu } from 'src/app/modeles/actu';

@Component({
    selector: 'app-liste-actus',
    templateUrl: './liste-actus.component.html',
    styleUrls: ['./liste-actus.component.css']
})

export class ListeActusComponent implements OnInit {

    actus: Observable<Actu[]>;

    constructor(private actuService: ActuService, private route: ActivatedRoute) { 
    }

    ngOnInit() {
        this.actus = this.actuService.getActusList();
    }

}

1 Ответ

0 голосов
/ 23 декабря 2018

Все выглядит хорошо, кроме routerLink и id деталей.

Имеет ли ваш Actu класс свойство id?Если да, то вы можете использовать actu.id в routerLink.

. Таким образом, тег a должен выглядеть следующим образом: 

<a *ngFor="let actu of actus | async;" [routerLink]="['path/of/your/route', actu.id]"
 /*other stuff*/ 
>
     <app-item-actus [actu]="actu"></app-item-actus>
</a>

Обратите внимание, что routerLink находится вквадратные скобки ([routerLink]).Таким образом, вы можете привязать переменные к атрибуту.Если нет, значение, указанное в атрибуте, является просто строкой.

Если у вашего Actu класса нет свойства id и вы хотите использовать индекс в качестве идентификатора, вам следует использовать его вместо этого.

<a *ngFor="let actu of actus | async; let i = index" [routerLink]="['path/of/your/route', i]"
 /*other stuff*/ 
>
     <app-item-actus [actu]="actu"></app-item-actus>
</a>
...