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

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

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

当前回答

Angular 7.2.0引入了在路由组件之间导航时传递数据的新方法:

@Component({
  template: `<a (click)="navigateWithState()">Go</a>`,
})
export class AppComponent  {
  constructor(public router: Router) {}
  navigateWithState() {
    this.router.navigateByUrl('/123', { state: { hello: 'world' } });
  }
}

Or:

@Component({
  selector: 'my-app',
  template: `
  <a routerLink="/details" [state]="{ hello: 'world' }">Go</a>`,
})
export class AppComponent  {}

要读取状态，你可以在导航结束后访问window.history.state属性:

export class PageComponent implements OnInit {
  state$: Observable<object>;

  constructor(public activatedRoute: ActivatedRoute) {}

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

2019-06-27 14:29:26

其他回答

使用JSON传递

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

2018-06-19 00:06:11

ActiveRoute的解决方案(如果你想通过路由传递对象-使用JSON.stringfy/JSON.parse):

发送前准备对象:

export class AdminUserListComponent {

  users : User[];

  constructor( private router : Router) { }

  modifyUser(i) {

    let navigationExtras: NavigationExtras = {
      queryParams: {
          "user": JSON.stringify(this.users[i])
      }
    };

    this.router.navigate(["admin/user/edit"],  navigationExtras);
  }

}

在目标组件中接收对象:

export class AdminUserEditComponent  {

  userWithRole: UserWithRole;      

  constructor( private route: ActivatedRoute) {}

  ngOnInit(): void {
    super.ngOnInit();

      this.route.queryParams.subscribe(params => {
        this.userWithRole.user = JSON.parse(params["user"]);
      });
  }

}

2018-09-20 20:02:34

您可以使用BehaviorSubject在路由组件之间共享数据。一个BehaviorSubject包含一个值。当它被订阅时，它立即发出该值。Subject不包含值。

在服役中。

@Injectable({
  providedIn: 'root'
})
export class CustomerReportService extends BaseService {
  reportFilter = new BehaviorSubject<ReportFilterVM>(null);
  constructor(private httpClient: HttpClient) { super(); }

  getCustomerBalanceDetails(reportFilter: ReportFilterVM): Observable<Array<CustomerBalanceDetailVM>> {
    return this.httpClient.post<Array<CustomerBalanceDetailVM>>(this.apiBaseURL + 'CustomerReport/CustomerBalanceDetail', reportFilter);
  }
}

在组件中，您可以订阅这个BehaviorSubject。

this.reportService.reportFilter.subscribe(f => {
      if (f) {
        this.reportFilter = f;
      }
    });

注意:主语在这里无效，只需要使用行为主语。

2020-03-19 18:07:30

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

2021-03-29 21:28:19

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

在angular 6或其他版本中，我希望最简单的方法是用你想要传递的数据量定义你的路径

{path: 'detailView/:id', component: DetailedViewComponent}

正如你可以从我的路由定义中看到的，我已经添加了/:id来支持我想通过路由器导航传递给组件的数据。因此，您的代码将看起来像

<a class="btn btn-white-view" [routerLink]="[ '/detailView',list.id]">view</a>

为了读取组件上的id，只需导入ActivatedRoute like

import { ActivatedRoute } from '@angular/router'

在ngOnInit上是你检索数据的地方

ngOnInit() {
       this.sub = this.route.params.subscribe(params => {
        this.id = params['id'];
        });
        console.log(this.id);
      }

你可以在这篇文章中阅读更多 https://www.tektutorialshub.com/angular-passing-parameters-to-route/

2018-09-06 14:02:24

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

推荐文章

最新文章

标签