如何将数据传递给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())

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

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

当前回答

一个很好的解决方案是使用canActivate方法实现Guard。在这种情况下，您可以从给定的api获取数据，并让用户访问路由文件中描述的组件。同时，可以设置路由对象的数据属性，并在组件中检索它。

假设你有这样的路由配置:

const routes: Routes = [
    { path: "/:projectName", component: ProjectComponent, canActivate: [ProjectGuard] }
]`

在你的警卫文件中，你可能有:

canActivate(next: ActivatedRouteSnapshot,state: RouterStateSnapshot)
: Observable<boolean> | Promise<boolean> | boolean {
return this.myProjectService.getProject(projectNameFoundElsewhere).pipe(
  map((project) => {
    if (project) {
      next.data = project;
    }
    return !!project;
  }),
);

然后在你的组件中

constructor(private route: ActivatedRoute) {
    this.route.data.subscribe((value) => (this.project = value));
}

这种方式与通过服务传递有点不同，因为服务只要没有取消设置，就会将值保存在behaviorSubject中。通过该防护使当前路由的数据可用。我还没有检查子路由是否保留数据。

2020-09-29 22:29:19

其他回答

我想因为在angular 2中我们没有像在angular 1.x中那样的$rootScope。我们可以使用angular 2的共享服务/类，同时在ngOnDestroy中将数据传递给服务，并在路由后从ngOnInit函数中的服务中获取数据:

这里我使用DataService来共享英雄对象:

import { Hero } from './hero';
export class DataService {
  public hero: Hero;
}

传递来自第一个页面组件的对象:

 ngOnDestroy() {
    this.dataService.hero = this.hero; 
 }

从第二页组件获取对象:

 ngOnInit() {
    this.hero = this.dataService.hero; 
 }

这里有一个例子:plunker

2016-09-19 09:39:38

在需要将数据传递到另一个Route的场景中，最好和最简单的解决方案是使用{window。localStorage}。此外，不要记得在数据使用结束后从本地存储中删除数据。我使用ngOnDestroy的destroy()方法来清理这些数据。这也解决了页面刷新丢失数据的问题。

2021-03-29 21:28:19

使用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

假设你有这样的路由配置:

const routes: Routes = [
    { path: "/:projectName", component: ProjectComponent, canActivate: [ProjectGuard] }
]`

在你的警卫文件中，你可能有:

canActivate(next: ActivatedRouteSnapshot,state: RouterStateSnapshot)
: Observable<boolean> | Promise<boolean> | boolean {
return this.myProjectService.getProject(projectNameFoundElsewhere).pipe(
  map((project) => {
    if (project) {
      next.data = project;
    }
    return !!project;
  }),
);

然后在你的组件中

constructor(private route: ActivatedRoute) {
    this.route.data.subscribe((value) => (this.project = value));
}

2020-09-29 22:29:19

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

推荐文章

最新文章

标签