Angular 2 路由器中的非 Url 参数

Question

在 angular 1.* 中，我正在使用 ui-router 并且能够从一个状态传递 NON URL 参数 给另一个。通过 NON URL 参数，我的意思是传递一些没有出现在 URL 上的参数（对用户来说完全透明）。

在 Angular 1.* 中执行此操作的方法是通过定义这样的状态（stateToRedirect 是非 url 参数）

   $stateProvider
    .state('LOGIN_STATE', {
      url: `login`,
      component: 'login',
      params: {
        stateToRedirect: 'home'
      }
    });

像这样改变状态：

  $state.go('LOGIN_STATE', {
    stateToRedirect: 'OTHER_STATE',
  });

在 LOGIN_STATE 中，我可以通过以下方式访问此参数：

$stateParams.stateToRedirect;

我正在尝试为 Angular 2 路由器找到相同的行为，我的理解是 Angular 2 路由器已经改进了很多，我们可能不需要使用 ui -router-ng2.

所以我的问题是：如何在 Angular 2 路由器中重现上述行为？

This question 似乎是我想要的，但我不希望 URL 中的参数和路线上的 [=34=] 属性似乎不错，但我可以'找到有关如何动态设置它的文档。

Answer 1

您必须从@angular/router导入 RouterModule 和路由。

    import { RouterModule, Routes } from '@angular/router';

    const routes: Routes = [{
      path: 'login/:stateToRedirect',
      component: LoginComponent,
      data: { 'yourParam': 'here goes your param' }
    }]

在你的组件中例如：

    import { ActivatedRoute, ParamMap } from '@angular/router';

    @Component({})...
    export class LoginComponent(){
       constructor(private route: ActivatedRoute){}
       private someFunction(){
          this.route.data.subscribe((data: any) => {
            console.log(data.yourParam);
          }); 
       }

您可以像这样传递静态参数而不显示在 url

Answer 2

如果这两个组件属于同一个模块，您是否考虑过使用服务来代替？在服务中添加模型（或参数），将其作为依赖项注入到两个组件中，在一个组件中设置其值并在其他组件中检索。

===更新==

可以使用 skipLocationChange 选项

customers.component.ts

this.router.navigateByUrl("/customers/details/1",{skipLocationChange:true});

在细节组件中，像下面这样检索它

selectedCustId:string=""

    ngOnInit() {
    this.route.paramMap.subscribe((params:ParamMap)=>this.selectedCustId=params.get('id'))
      }

Answer 3

您问的问题更多是关于 component to component communication 而不是路由本身。您需要的是将数据从一个组件（与特定路由关联）传递到另一个组件（与另一路由关联）。

组件到组件的通信可以通过以下方式实现

具有父子关系的组件可以通过@Input()和@Output()装饰器和事件发射器传递数据
Via the use of a service。位于同一模块中的不共享父子关系的组件可以通过服务共享数据，通过使用可观察序列（具有生产者-消费者模型）或通过在变量中设置数据并相应地读取。通过向根（或两者的父）模块注册服务，可以将此方法扩展到驻留在不同模块中的组件。
通过路由器。数据可以作为路径参数通过路由器传递，例如：my/path/thisisapathvalue、optional parameters (using matrix notation), eg my/path;item=hello;item2=world or via query string paramters eg my/path?item=hello&item2=world. You can also resolve data for a particular component by using resolve guards 解析静态数据、从服务器检索的数据、通过函数解析等

对于您的场景，您最有可能需要的是在源组件与目标组件之间传递数据的服务，因为即使使用解析守卫来解析数据，您也需要额外的服务来临时存储您需要传递的数据。

Answer 4

正如您所说，每个路由中的 data 键都可以解决您的问题。

总而言之，路由就像一棵大树，由于 snapshot 键，可以用作可观察数据或直接原始数据。

举个例子

主要组件

ngOnInit() {
    this.route.data.subscribe((data: any )=> {
      data.test = 'wassup';

    })
  }

子组件

ngOnInit() {
        this.route.parent.data.subscribe((data: any )=> {
            console.log(data);      
        })
/* or console.log(this.route.parent.snapshot.data) */
      }

某处组件

ngOnInit() {
        this.route.root.children[0].data.subscribe((data: any )=> {
            console.log(data);      
        })
      }

如果你有一个复杂的路由架构，我真的建议你编写一个 readerService，它将从根或任何地方进入树内部，并为你提供整个参数映射和所有想要的数据。

Answer 5

可以使用路由解析器来完成此操作，它比您的 AngularJs 实现要复杂一些，但应该允许您做您想做的事。

Angular 文档

https://angular.io/guide/router#resolve-pre-fetching-component-data

视频示例来自 Angular 大学 YouTube 频道（无从属关系）

https://www.youtube.com/watch?v=6xmCNfPP90E

Angular 2 路由器中的非 Url 参数

Non-Url Parameters in Angular 2 Router

angular2-routing

angular