Question

在角度1. *中，我使用的是ui-router，并且能够将非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中的参数和路线上的'data'属性看起来不错，但我找不到关于如何动态设置它的文档。 / p>

Answer 1

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

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

具有父子关系的组件可以通过@Input（）和@Output（）装饰器和事件发射器传递数据
Via the use of a service。不共享驻留在同一模块中的父子关系的组件可以通过服务共享数据，或者通过使用Observable序列（具有生产者 - 消费者模型），或者通过在变量中设置数据并相应地读取。通过向根（或两者为父）模块注册服务，可以将此方法扩展到驻留在不同模块中的组件。
通过路由器。数据可以作为路径参数通过路由器传递，例如：my/path/thisisapathvalue，optional parameters（使用矩阵表示法），例如my/path;item=hello;item2=world或通过查询字符串参数，例如my/path?item=hello&item2=world。您还可以使用resolve guards来解析特定组件的数据，{{3}}可以解析静态数据，从服务器检索的数据，通过函数解析等。

对于您的场景，您最需要的是一个服务，它将源组件与目标组件之间的数据进行通信，因为即使使用解析保护来解析数据，您也需要额外的服务来临时存储您需要传递的数据。

Answer 2

You have to import RouterModule and Routes from @angular/router.

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

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

In your component for eg:

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

You can pass static parameters like this without showing on the url

Answer 3

正如您所说，每条路线中的数据键可以解决您的问题。

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

向您展示一个示例

MainComponent

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

    })
  }

ChildComponent

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

SomewhereComponent

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

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

Answer 4

使用路线解析器可以做到这一点，它会比你的AngularJs实现更多一些，但应该让你做你想做的事。

有角度的文档

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

来自Angular University YouTube频道的视频示例（无关联）

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

Angular 2路由器中的非Url参数

4 个答案: