Question

免责声明：我是个菜鸟..对不起

假设我有两个兄弟姐妹的不同组件：

comp1 and comp2

我希望使用一堆数据从comp1路由到comp2。如果没有一个包含所有内容的虚拟网址栏，我怎样才能实现这一目标？

我尝试使用单独的类，我们称之为DataTransmitter：

data-transmitter.js:
export class DataTransmitter {
    constructor() {
    this.val= "a";
    }
}

comp1.js:
import { DataTransmitter } from './data-transmitter';

@inject(DataTransmitter)
export class comp1{
    constructor(DataTransmitter){
        this.DataTransmitter = DataTransmitter;
    }

    someMethod(){
        this.DataTransmitter.val = "b";
        console.log('comp1: ' + this.DataTransmitter.val);
    }
}


comp2.js:
import { DataTransmitter } from './data-transmitter';

@inject(DataTransmitter)
export class comp2{
    constructor(DataTransmitter){
        this.DataTransmitter = DataTransmitter;
    }

    someMethod(){
        console.log('comp2: ' + this.DataTransmitter.val);
    }
}

这给了我输出：

comp1: b
comp2: a

我也尝试过使用EventAggregator，但没有成功。

是否有某种方式使用参数进行路由而没有看起来像site/comp2?data=stuff&things=otherstuff&params=values&more=etc的网址？

Answer 1

您绝对想要使用单例类，然后将其注入您需要数据的任何组件中。 Gaby发布的链接绝对是您想要做的。

您发布的代码不起作用的原因是您尝试使用inject装饰器，但您没有导入它。请参阅这个有关您在Gist.run here上尝试做的工作示例。我有两个组件，您可以单击它们之间的路由并设置值。当你来回导航时，你会发现设定值仍然存在。

将数据传递到另一条路线而不会弄乱网址

1 个答案: