Question

我有一个用Angular2编写的应用程序。在一个组件中，有一个图表，您可以通过设置几个变量来调整它。我希望用户完全设置图表，这些变量已经由URL链接设置。

例如：localhost:4200/app/chart?height=500;width=400;color=blue

在我的组件中，有一些变量叫做：

this.height: number;
this.width: number;
this.color: string;

这是我的问题，如何在组件加载时从URL链接中准确设置它们？（在初始阶段）

我的第二个问题，我怎样才能将这些变量传递给URL？例如，我有这些变量：

this.height: number = 500;
this.width: number = 400;
this.color: string = blue;

如何将它们发送到网址？使它看起来像：

localhost:4200/app/chart?height=500;width=400;color=blue`

我的路由文件：

import { Routes, RouterModule } from '@angular/router';

import { ChartComponent } from './chart/chart/index';

const appRoutes: Routes = [
  { path: 'app', component: AppComponent,
    children: [
      { path: 'chart', component: ChartComponent },
      { path: '', component: DashboardComponent }
    ]},

  // otherwise redirect to home
  { path: '**', redirectTo: '' }
 ];

export const routing = RouterModule.forRoot(appRoutes);

Answer 1

constructor(private route: ActivatedRoute) {}

  ngOnInit() {
    this.route.params.subscribe(
      (params: any) => {
        this.height: number = params['height'];
        this.width: number = params['width'];
        this.color: string = params['color'];
      }
    );
  }

在Angular 2中通过URL传递变量或设置变量

1 个答案: