所以,我试图使用相同的组件制作两个单独的routerLink,但是它们具有不同的html视图。问题是它一直给我以下错误:“错误:无法匹配任何路线”。
这是我要实现的代码:
{
path: 'home',
component: HomeComponent,
},
{
path: 'homeInfo/:id',
component: HomeComponent,
},
可以这样做吗?如果是,我如何使用routerLinks使用同一控制器调用2个单独的HTML ...
这很容易做到。您能否提供有关该应用程序的更多信息,例如您如何使用路由器链接?
希望这会对您有所帮助。使用您的按钮,如下所示。
<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;
}
});
}
}