Angular 5 - 参数化路由的替代方案

Question

我的用例是这样的：

在主页面中，我有 2 个按钮，它们中的任何一个都会将我带到同一个屏幕。当我说 'same screen' 时，我指的是完全相同的组件
在目标组件中，我需要知道是哪个按钮将我引导至此处。这样数据将被不同地处理。

到目前为止我所做的是使用参数化路由（btn）：

export const routes: Routes = [
   //blah
  { path: 'configuration/:btn', component: ConfigurationComponent, data : { title: 'Configuration' } },
   //blah
];

export class ConfigurationComponent implements OnInit {
    ngOnInit() {
    this.sub = this.route.params.subscribe(params => {
      this.btnType = +params['btn'];
    });

    //this.btnType will be used to identify which button was clicked
}

第一个按钮

<a [routerLink]="['/configuration', '1']">

第二个按钮

<a [routerLink]="['/configuration', '2']">

我想解决的问题：

url显示为：

configuration/1 和 configuration/2

但我想显示为：

configuration/HELLO 和 configuration/BYEBYE

这可以通过参数化路由来完成吗？如果没有，还有其他选择吗？

Answer 1

您当前的解决方案能够解决这个问题。您唯一需要做的就是更新这些：

this.btnType = +params['btn'];
<a [routerLink]="['/configuration', '1']">
<a [routerLink]="['/configuration', '2']">

成为：

this.btnType = params['btn'];
<a [routerLink]="['/configuration', 'HELLO']">
<a [routerLink]="['/configuration', 'BYEBYE']">

如果没有 +，参数将保持为字符串值，并且会是 'HELLO' 或 'BYEBYE'，具体取决于您的路线。

Angular 5 - 参数化路由的替代方案

Angular 5 - Alternative for parameterized routing

angular

angular-ui-router