相关疑难解决方法(0)

如何将数据传递给Angular路由组件?

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

first.component.html

<div class="button" click="routeWithData()">Pass data and route</div>
Run Code Online (Sandbox Code Playgroud)

我的目标是实现:

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

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

第一种方法

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

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
    }
}
Run Code Online (Sandbox Code Playgroud)

一般情况下我路由SecondComponent通过

 this._router.navigate(['SecondComponent']);
Run Code Online (Sandbox Code Playgroud)

最终传递数据

 this._router.navigate(['SecondComponent', {p1: this.property1, p2: property2 }]);
Run Code Online (Sandbox Code Playgroud)

而带参数的链接的定义是

@RouteConfig([
      // ...
      { path: '/SecondComponent/:p1:p2', …
Run Code Online (Sandbox Code Playgroud)

typescript angular

216
推荐指数
11
解决办法
30万
查看次数

标签 统计

angular ×1

typescript ×1