Как открыть новый компонент в Angular по клику в теге <td>, который содержит имя пользователя?

Question

Я хочу открыть новый компонент, когда нажимаю на тег <td>, присутствующий в моем файле HTML:

У меня есть dashboard.component. html, и в этом у меня есть таблица, которая состоит из имени, идентификатора, адреса и т. д. c.

Теперь, когда я нажимаю на <td>{{item.name}}</td>, я должен иметь возможность перейти к новому компоненту, например, например. detials.component

ниже - мой dashboard.component. html код:

<tr *ngFor="let item of collection.data | paginate: config">
        <th scope="row">
          <div class="custom-control custom-checkbox">
            <input type="checkbox" class="custom-control-input" [attr.id]="item.id">
            <label class="custom-control-label" [attr.for]="item.id"></label>
          </div>
        </th>
        <td>{{item.name}}

        </td>
        <td>{{item.enquiryNo}}</td>

Мой файл dashboard.component.ts выглядит так:

import { Component, OnInit } from '@angular/core';
import { faChevronDown, faSearch, faChevronLeft, faChevronRight } from '@fortawesome/free-solid-svg-icons';

@Component({
  selector: 'smart360-dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: ['./dashboard.component.scss']
})
export class DashboardComponent implements OnInit {
  faChevronDown = faChevronDown;
  faChevronLeft = faChevronLeft;
  faChevronRight = faChevronRight;
  faSearch = faSearch;
  collection = { count: 60, data: [] };
  config = {
    id: 'custom',
    itemsPerPage: 10,
    currentPage: 1,
    totalItems: this.collection.count
  };

  public maxSize: number = 7;
  public directionLinks: boolean = true;
  public autoHide: boolean = false;
  public responsive: boolean = true;
  public labels: any = {
    previousLabel: '<--',
    nextLabel: '-->',
    screenReaderPaginationLabel: 'Pagination',
    screenReaderPageLabel: 'page',
    screenReaderCurrentLabel: `You're on page`
  };



  constructor() {
    //Create dummy data
    for (var i = 0; i < this.collection.count; i++) {
      this.collection.data.push(
        {
          id: i + 1,
          name: "Name" + (i + 1),
          enquiryNo: "0019924" + i,
          status: ['danger', 'success', 'warning'].sort((a, b) => .5 - Math.random())[0],
          mobileNo: "+91 9849163057",
          area: "Old Alwal",
          source: "Branch",
          raisedOn: new Date()

        }
      );
    }
  }

  ngOnInit(): void {
  }
  onPageChange(event) {
    console.log(event);
    this.config.currentPage = event;
  }

}

Answer 1

Вы должны объявить путь для этого компонента Detail, затем в конструкторе компонента панели мониторинга внедрить Router и объявить метод onCLicRenderDetail, чтобы отобразить его в компоненте detail и выполнить этот метод в onCLick html элемента

dashboard.component.ts

constructor(private router: Router) {}

renderDetail(detailId: number) {
  route.navigateByUrl('rotuePath/' + datailId);
}

<td (click)="renderDetail(item.id)">{{item.name}}</td>