Как использовать routerLink с двумя html

Question

Итак, я пытаюсь создать две отдельные линии routerLink с одним и тем же компонентом, но они имеют разные html представления. проблема в том, что он продолжает выдавать мне ошибку: «Ошибка: невозможно сопоставить никакие маршруты».

Это код, который я пытаюсь реализовать:

{
    path: 'home', 
    component: HomeComponent,
}, 
{
   path: 'homeInfo/:id', 
   component: HomeComponent,
},

Может ли это быть сделанный? Если да, как я могу вызвать 2 отдельных HTML с одного и того же контроллера, используя routerLinks ...

Answer 1

Надеюсь, это поможет вам. Используйте кнопки, как показано ниже.

<button type="button" [routerLink]="['/homeInfo/',<your id>]" label="Home Info"></button>

<button type="button" routerLink="/home/" label="Home"></button>

В вашем домашнем компоненте

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

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.scss']
})
export class HomeComponent implements OnInit {
  constructor(
    private route: ActivatedRoute,
  ) {}

  title: string;
  id: number;

  //Based on these boolean values change HTML controls
  isHomeMode = false;
  isHomeInfoMode = false;

  msgs: any[];

  ngOnInit() {
    this.route.params.subscribe(params => {
      if (this.route.snapshot.url[0].path === 'home') {
        this.title = 'Home';
        this.isHomeMode = true;
      } else {
        this.title = 'Home Info';
        this.isHomeInfoMode = true;
        this.id = params.id;
      }
    });
  } 
}

StackBlitz: https://stackblitz.com/edit/angular-egkmls