相关疑难解决方法(0)

在我的一个Angular 2路线的模板(FirstComponent)中,我有一个按钮

first.component.html

<div class="button" click="routeWithData()">Pass data and route</div>

我的目标是实现:

按钮单击 - >路由到另一个组件,同时保留数据,而不使用其他组件作为指令.

这就是我试过的......

第一种方法

在同一视图中,我存储基于用户交互收集相同的数据.

first.component.ts

export class FirstComponent {
     constructor(private _router: Router) { }

     property1: number;
     property2: string;
     property3: TypeXY; // this a class, not a primitive type

    // here some class methods set the properties above

    // DOM events
    routeWithData(){
         // here route
    }
}

一般情况下我路由SecondComponent通过

 this._router.navigate(['SecondComponent']);

最终传递数据

 this._router.navigate(['SecondComponent', {p1: this.property1, p2: property2 }]);

而带参数的链接的定义是

@RouteConfig([
      // ...
      { path: '/SecondComponent/:p1:p2', …

我可以想象以下方法在多步骤表单之间交换数据:

1)为每个表单步骤创建一个组件,并通过@input,@ output输出组件之间的数据(例如,您不能从步骤5更改为2)

2)data在新路由器中使用新属性(参见此处)(例如,您无法从步骤5更改为2))

3)用于存储数据的共享服务(依赖注入)(组件交互)(例如,您可以从步骤5更改为2)

4)@ ngrx/store的新基础(还没有真正经验)

你能给出一些"获得经验值",你用了什么？为什么？

我想在定义路由时添加一些自定义数据进行路由.

我怎样才能做到这一点？

喜欢:

{
  path: 'department',
  component: DepartmentComponent,

  customdata: {
    name: 'foo',
    age: '23'
  }
}

我不希望自定义数据显示在URL中.我只是在内部使用它.