将参数传递给组件

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 可能需要使用版本 1 的 SiteLayoutComponent 和 TeamComponent 可能使用版本 2 的 SiteLayoutComponent 和 TeamComponent。

这有意义吗？

更新

我创建并在线示例：

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']; 
    }

  });
}