如何在两个不同angular应用程序之间传递数据
如何在两个不同angular应用程序之间传递数据
提问于 2019-12-10 19:02:20
这是我的要求
我有两个Angular web应用程序App1和App2。在App1中，我创建了一个令牌对象(它也可以是一个字符串)。
我想通过用App2的url替换来自App1的URl来打开(不应该打开任何新窗口，它应该在相同的地址栏上打开App2 url )
在这里，我尝试了下面的方法，到目前为止它还不起作用
通过按下我正在触发App2的按钮，"App1“中的代码
用App1编写的代码
goToNextPage(){
var domain = 'http://localhost:1338/';
// //create popup window
var myPopup = window.open(domain,"_self");
// //periodical message sender
setInterval(function(){
var message = 'current time: ' + (new Date().getTime());
console.log('blog.local: sending message: ' + message);
myPopup.postMessage(message,domain);
//send the message and target URI
},2000);
window.addEventListener('message',function(event) {
if(event.origin !== 'http://localhost:1337/') return;
console.log('received response: ',event.data);
},false);
}在App2中，我使用下面的代码来检索数据。
constructor(public cookieService:CookieService){
// //respond to events
window.addEventListener('message',function(event) {
debugger
// //
if(event.origin == 'http://localhost:1337/') return;
console.log('message received: ' + event.data,event);
alert('message received: ' + JSON.stringify(event.data))
// //event.source.postMessage('holla back youngin!',event.origin);
},false);
}在这里，我得到的event.data是undefined
有什么办法可以解决这个问题吗？
回答 2
Stack Overflow用户
发布于 2019-12-10 22:34:36
您可以使用服务器端共享api，也可以使用查询字符串在url上传递数据。如果两个应用程序在同一个域上运行，那么cookies、会话存储和本地存储之类的东西就可以工作。
Stack Overflow用户
发布于 2019-12-11 03:44:10
如果您使用的是Angular 2+，您可以使用cookies步骤-1为这两个应用程序安装npm install ngx-cookie-service，或者可以全局安装步骤2。
App1 -> app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import {CookieService} from 'ngx-cookie-service'
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AppRoutingModule
],
providers: [CookieService],
bootstrap: [AppComponent]
})
export class AppModule { }App1 - app.component.ts
import { Component } from '@angular/core';
import {CookieService} from 'ngx-cookie-service'
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'my-first-project';
constructor(public cookieService:CookieService){
}
goToNextPage(){
this.cookieService.set("my-key","yourkey")
}
}App2 - app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import {CookieService} from 'ngx-cookie-service'
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AppRoutingModule
],
providers: [CookieService],
bootstrap: [AppComponent]
})
export class AppModule { }App2 - app.component.ts
import { Component } from '@angular/core';
import {CookieService} from 'ngx-cookie-service'
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'my-second-project';
constructor(public cookieService:CookieService){
alert(this.cookieService.get("my-key"))
}
}很简单..但你也可以像其他人提到的那样看其他方面。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/59273771
复制相关文章
相似问题
腾讯云开发者
