将参数传递给组件

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 作为其他页面的 "master page"。

SiteLayoutComponent根据版本值有细微差别。

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

这有意义吗？

更新

我创建了在线示例：

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

单击 "Team" 时，它应该出现 "Layout Component 1.0"，但出现 "Layout Component"。

我错过了什么？

Answer 1

关注这个

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

  });
}

Answer 2

您可以像这样将版本作为数据保存在您的子路由中

{ 
    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"]

有用link

将参数传递给组件

Pass parameter to component

angular

angular5

angular6