如何使用带有两个html的routerLink

Question

所以，我试图使用相同的组件制作两个单独的routerLink，但是它们具有不同的html视图。问题是它一直给我以下错误：“错误：无法匹配任何路线”。

这是我要实现的代码：

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

可以这样做吗？如果是，我如何使用routerLinks使用同一控制器调用2个单独的HTML ...

Answer 1

这很容易做到。您能否提供有关该应用程序的更多信息，例如您如何使用路由器链接？

Answer 2

希望这会对您有所帮助。使用您的按钮，如下所示。

<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;
      }
    });
  } 
}