Question

我有一个简单的场景。

我正在Angular2 app.module配置中注册一个组件。

routes = [ 
{ path: "/home", component: HomeComponent, data : { info : "hello world" }];

现在，我想调用相同的页面，根据某些条件传递一个不同值的info的变量版本，以便我可以向左或向右动画？我尝试过很多东西，包括以下内容，其中没有一个对我有用。

router.navigate(["/home", {info : "hello again" }]);

经过进一步检查后，我注意到路线中的数据仅用于静态信息，这种情况只会助长我的计划。整个想法是，当我单击后退按钮时，我可以将一些数据传递给所有页面的点击，这些页面设置标志以使用后向动画而不是具有向左或向右滑动过渡的前向动画。

这让我只有一些考虑因素，其中包括一些看起来很吸引人的考虑因素。重复的路线定义，＆＃34;没办法！＆＃34;警卫将变量传递给每个组件，＆＃34;几乎没有去领域！＆＃34;。我试图避免的最后一个是全局变量。否则，我没有看到任何优雅的解决方案。我相信他们在那里，但我现在感到蒙羞。

Answer 1

您可以使用路由器和 ActivatedRoute 在两个组件之间传递数据。

来电者将执行以下操作：

import { Component, OnInit } from '@angular/core';
import { Router, NavigationExtras } from "@angular/router";

@Component({
  selector: 'caller-component'
})
export class CallerComponent implements OnInit {

  constructor(private route: ActivatedRoute) { }

  ngOnInit() {

  }

  navigate(){
    //called when a specific link is clicked in the template
    let extraData: NavigationExtras = {
      queryParams: {
        "prop1": "Hello Home!",
        "prop2": "I am back"
      }
    };
    this.router.navigate(['/home'], extraData);

  }

}

然后你的家庭组件需要学习如何拦截这些参数：

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from "@angular/router";

@Component({
  selector: 'home-component'
})
export class HomeComponent implements OnInit {

  constructor(private route: ActivatedRoute) { }

  ngOnInit() {

    this.route.params.subscribe(params => {
      //Do something here with the values you receive
      console.log(params.prop1);
      console.log(params.prop2);
    });
  }

}

如何优雅地将状态传递给我的组件的后点击？

1 个答案: