Question

我有以下Angular 6组件：

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

@Component({
  selector: 'app-site-layout',
  templateUrl: './site-layout.component.html'
})

export class SiteLayoutComponent implements OnInit {

  @Input() version: string;

}

我有以下路由定义：

const appRoutes: Routes = [

  { 
    path: '', 
    component: SiteLayoutComponent,
    children: [
      { path: 'about', component: AboutComponent },
      { path: 'team', component: TeamComponent }
    ]
  }

  // Other routes

]

是否可以在以下位置传递版本值：

{ path: 'about', component: AboutComponent }

我将SiteLayoutComponent用作其他页面的“母版页”。

SiteLayoutComponent的版本值差异很小。

例如，AboutComponent可能需要使用SiteLayoutComponent的版本1，而TeamComponent可能会使用SiteLayoutComponent和TeamComponent的版本2。

这有意义吗？

更新

我创建了在线示例：

http://stackblitz.com/edit/angular-rxxfff

单击“团队”时，它应显示为“布局组件1.0”，但显示为“布局组件”。

我想念什么？

Answer 1

您可以像这样将版本保留为子路径上的数据

{ 
    path: '', 
    component: SiteLayoutComponent,
    children: [
      { path: 'about', component: AboutComponent,data: { version: "1.0" } },
      { path: 'team', component: TeamComponent,data: { version: "2.0" } }
    ]
  }

您可以通过使用父组件（ SiteLayoutComponent ）中的 ActivateRoute 进行访问，并根据版本进行更改

constructor(
    private route: ActivatedRoute,

  ) {}


var version= this.route.snapshot.firstChild.data["version"]

有用的链接

How can I access an activated child route's data from the parent route's component?

Answer 2

遵循

{ path: 'about/:version', component: AboutComponent }

import { ActivatedRoute } from '@angular/router';

export class SiteLayoutComponent implements OnInit {

version: string;

constructor(private route: ActivatedRoute) {}

ngOnInit() {
  this.route.params.subscribe(params => {
    if (params.hasOwnProperty('pid') && params['pid'] != ''{
     this.version = params['version']; 
    }

  });
}

将参数传递给组件

2 个答案: