如何使用两个 html 的 routerLink

Question

因此，我正在尝试使用相同的组件创建两个单独的 routerLink，但它们具有不同的 html 视图。问题是它一直给我错误："Error: Cannot match any routes".

这是我要实现的代码：

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

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

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

堆栈闪电战：https://stackblitz.com/edit/angular-egkmls

如何使用两个 html 的 routerLink

How to use routerLink with two html's

angular

angular7