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

在我的Angular 2路由模板之一(FirstComponent)中，我有一个按钮

first.component.html

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

我的目标是:

按钮点击->路由到另一个组件，同时保留数据，而不使用另一个组件作为指令。

这是我试过的…

1号的方法

在同一个视图中，我根据用户交互存储收集相同的数据。

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
    }
}

通常我会通过

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

最终传递数据

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

而带有参数的链接的定义将是

@RouteConfig([
      // ...
      { path: '/SecondComponent/:p1:p2', name: 'SecondComponent', component: SecondComponent} 
)]

这种方法的问题是，我猜我不能在url中传递复杂的数据(例如property3这样的对象);

2方法

另一种方法是在FirstComponent中包含SecondComponent作为指令。

  <SecondComponent [p3]="property3"></SecondComponent>

然而，我想路由到该组件，不包括它!

第三个方法

我在这里看到的最可行的解决方案是使用一个服务(例如FirstComponentService)来

将数据(_firstComponentService.storeData())存储在FirstComponent的routeWithData()上在SecondComponent的ngOnInit()中检索数据(_firstComponentService.retrieveData())

虽然这种方法似乎完全可行，但我想知道这是否是实现目标的最简单/最优雅的方法。

一般来说，我想知道我是否错过了在组件之间传递数据的其他潜在方法，特别是在代码量可能较少的情况下

当前回答

使用JSON传递

  <a routerLink = "/link"
   [queryParams] = "{parameterName: objectToPass| json }">
         sample Link                   
  </a>

2018-06-19 00:06:11

其他回答

使用JSON传递

  <a routerLink = "/link"
   [queryParams] = "{parameterName: objectToPass| json }">
         sample Link                   
  </a>

2018-06-19 00:06:11

使用共享服务使用自定义索引存储数据。然后用queryParam发送自定义索引。这种方法更加灵活。

// component-a : typeScript :
constructor( private DataCollector: DataCollectorService ) {}

ngOnInit() {
    this.DataCollector['someDataIndex'] = data;
}

// component-a : html :
<a routerLink="/target-page" 
   [queryParams]="{index: 'someDataIndex'}"></a>

// component-b : typeScript :
public data;

constructor( private DataCollector: DataCollectorService ) {}

ngOnInit() {
    this.route.queryParams.subscribe(
        (queryParams: Params) => {
            this.data = this.DataCollector[queryParams['index']];
        }
    );
}

2018-12-24 10:46:25

现在是2019年，这里的许多答案都有用，这取决于你想做什么。如果你想传递一些URL中不可见的内部状态(params, query)，你可以从7.2开始使用state(正如我今天刚刚学到的:))。

从博客(Tomasz Kula) -您导航到....路线

…来自ts: this.router。navigateByUrl('/details'， {state: {hello: 'world'}});

…from HTML template: <a routerLink="/details" [state]="{hello: 'world'}">Go</a> .

并在目标组件中拾取它:

constructor(public activatedRoute: ActivatedRoute) {}

  ngOnInit() {
    this.state$ = this.activatedRoute.paramMap
      .pipe(map(() => window.history.state))
  }

有点晚了，但希望这能帮助到刚接触Angular的人。

2019-11-11 11:29:16

我查看了本页中的每个解决方案(并尝试了一些)，但我不相信我们必须实现一种hack式的方式来实现路由之间的数据传输。

简单历史的另一个问题。状态是指，如果您在状态对象中传递特定类的实例，在接收它时它将不是实例。但它将是一个简单的JavaScript对象。

所以在我的Angular v10 (Ionic v5)应用中，我这样做了

this.router.navigateByUrl('/authenticate/username', {
    state: {user: new User(), foo: 'bar'}
});

在导航组件('/authenticate/username')中，在ngOnInit()方法中，我用this.router.getCurrentNavigation().extras.state-打印了数据

ngOnInit() {
    console.log('>>authenticate-username:41:',
        this.router.getCurrentNavigation().extras.state);
}

我得到了想要的数据

2020-08-10 04:32:27

说你有

component1.ts component1.html

您希望将数据传递给component2.ts。

in component1.ts is a variable with data say //component1.ts item={name:"Nelson", bankAccount:"1 million dollars"} //component1.html //the line routerLink="/meter-readings/{{item.meterReadingId}}" has nothing to //do with this , replace that with the url you are navigating to <a mat-button [queryParams]="{ params: item | json}" routerLink="/meter-readings/{{item.meterReadingId}}" routerLinkActive="router-link-active"> View </a> //component2.ts import { ActivatedRoute} from "@angular/router"; import 'rxjs/add/operator/filter'; /*class name etc and class boiler plate */ data:any //will hold our final object that we passed constructor( private route: ActivatedRoute, ) {} ngOnInit() { this.route.queryParams .filter(params => params.reading) .subscribe(params => { console.log(params); // DATA WILL BE A JSON STRING- WE PARSE TO GET BACK OUR //OBJECT this.data = JSON.parse(params.item) ; console.log(this.data,'PASSED DATA'); //Gives {name:"Nelson", bankAccount:"1 //million dollars"} }); }

2019-05-13 18:31:13

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

推荐文章

最新文章

标签