Javascript 如何在两个不同的角度应用程序之间传递数据

这是我的要求

我有两个有角度的web应用程序

App1

&App2。在

App1

中，我正在创建一个令牌对象（它也可以是字符串）

我想通过将

App1

中的url替换为

App2

的url来打开（不应打开新窗口，它应在同一地址栏上打开App2 url）

在这里，我尝试了下面的方法，但到目前为止还不起作用

按下我正在触发的按钮

App2

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

在这里，我得到了

事件。数据
是
未定义的

您可以使用服务器端的共享api或使用查询字符串在url上传递数据。如果两个应用程序在同一个域上运行，cookie、会话存储和本地存储等功能都可以正常工作。
您可以使用服务器端共享的api或使用查询字符串在url上传递数据。如果两个应用程序在同一个域上运行，那么cookie、会话存储和本地存储等功能都可以正常工作。
如果您使用的是Angular 2+，则可以使用cookie
步骤-1为两个应用安装
npm安装ngx cookie服务
，或者可以全局安装
第二步

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 { }

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

}

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"))

  }
}

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 { }

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-first-project';

  constructor(public cookieService:CookieService){

  }

  goToNextPage(){

  this.cookieService.set("my-key","yourkey")
  }

}

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"))

  }
}

很简单。。但是，你也可以像其他人提到的那样，以其他方式观看。
如果你使用Angular 2+你可以使用cookies
步骤-1为两个应用安装
npm安装ngx cookie服务
，或者可以全局安装
第二步

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 { }

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

}

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"))

  }
}

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 { }

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-first-project';

  constructor(public cookieService:CookieService){

  }

  goToNextPage(){

  this.cookieService.set("my-key","yourkey")
  }

}

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"))

  }
}

很简单。。但是，您也可以像other提到的那样查看其他方式。
除非同时运行两者，否则您将无法在两者之间发送消息。如果您想存储这样的信息，可以查看
localstorage
，或者简单地使用URL传递数据。这是行不通的。除非两者同时运行，否则将无法在两者之间发送消息。如果您想存储这样的信息，可以查看
localstorage
，或者简单地使用URL传递数据。这是行不通的。有了它，你将进入违反安全的世界！有了这个，你将进入安全违规的世界！