如何将值从一个组件发送到另一个组件？

3 回答

• 5

  哦！！可能我来不及回答这个问题！但没关系 . 这可能会帮助您或其他人使用与共享服务一起使用的路由器，共享服务和共享对象在组件之间共享数据 . 我希望这肯定会有所帮助 .

  Answer

  Boot.ts

  import {Component,bind} from 'angular2/core';
  
  import {bootstrap} from 'angular2/platform/browser';
  
  import {Router,ROUTER_PROVIDERS,RouteConfig, ROUTER_DIRECTIVES,APP_BASE_HREF,LocationStrategy,RouteParams,ROUTER_BINDINGS} from 'angular2/router';
  
  import {SharedService} from 'src/sharedService';
  
      import {ComponentFirst} from 'src/cone';
  import {ComponentTwo} from 'src/ctwo';
  
  
  @Component({
    selector: 'my-app',
    directives: [ROUTER_DIRECTIVES],
    template: `
      <h1>
        Home
      </h1> 
  
      <router-outlet></router-outlet>
        `,
  
  })
  
  @RouteConfig([
    {path:'/component-first', name: 'ComponentFirst', component: ComponentFirst}
    {path:'/component-two', name: 'ComponentTwo', component: ComponentTwo}
  
  ])
  
  export class AppComponent implements OnInit {
  
    constructor(router:Router)
    {
      this.router=router;
    }
  
      ngOnInit() {
      console.log('ngOnInit'); 
      this.router.navigate(['/ComponentFirst']);
    }
  
  
  
  }
  
      bootstrap(AppComponent, [SharedService,
      ROUTER_PROVIDERS,bind(APP_BASE_HREF).toValue(location.pathname)
      ]);
  

  FirstComponent

  import {Component,View,bind} from 'angular2/core';
  import {SharedService} from 'src/sharedService';
  import {Router,ROUTER_PROVIDERS,RouteConfig, ROUTER_DIRECTIVES,APP_BASE_HREF,LocationStrategy,RouteParams,ROUTER_BINDINGS} from 'angular2/router';
  @Component({
    //selector: 'f',
    template: `
      <div><input #myVal type="text" >
      <button (click)="send(myVal.value)">Send</button>
        `,
  
  })
  
  export class ComponentFirst   {
  
    constructor(service:SharedService,router:Router){
      this.service=service;
      this.router=router;
    }
  
    send(str){
      console.log(str);
      this.service.saveData(str); 
      console.log('str');
      this.router.navigate(['/ComponentTwo']);
    }
  
  }
  

  SecondComponent

  import {Component,View,bind} from 'angular2/core';
  import {SharedService} from 'src/sharedService';
  import {Router,ROUTER_PROVIDERS,RouteConfig, ROUTER_DIRECTIVES,APP_BASE_HREF,LocationStrategy,RouteParams,ROUTER_BINDINGS} from 'angular2/router';
  @Component({
    //selector: 'f',
    template: `
      <h1>{{myName}}</h1>
      <button (click)="back()">Back<button>
        `,
  
  })
  
  export class ComponentTwo   {
  
    constructor(router:Router,service:SharedService)
    {
      this.router=router;
      this.service=service;
      console.log('cone called');
      this.myName=service.getData();
    }
    back()
    {
       console.log('Back called');
      this.router.navigate(['/ComponentFirst']);
    }
  
  }
  

  SharedService and shared Object

  import {Component, Injectable,Input,Output,EventEmitter} from 'angular2/core'
  
  // Name Service
  export interface myData {
     name:string;
  }
  
  
  
  @Injectable()
  export class SharedService {
    sharingData: myData={name:"nyks"};
    saveData(str){
      console.log('save data function called' + str + this.sharingData.name);
      this.sharingData.name=str; 
    }
    getData:string()
    {
      console.log('get data function called');
      return this.sharingData.name;
    }
  }
  

  回复于 2024-04-18T15:20:41+08:00
• 18

  您所要做的就是提供服务，将其注入两个组件，将输入值分配给可验证的服务，并在另一个组件中访问它 . 抱歉兄弟，但不知道创建plunker . 这是代码：

  编辑：

  首先制作这个数据服务：

  export class DataService{
       dataFromService;}
  

  然后在第一个组件中注入：

  import {Component,View} from 'angular2/core';
  import {Router} from 'angular2/router';
  import {DataService} from 'path/to/dataservice';
  
  @Component({
  templateUrl: 'home/home.html'
  })
  
  
  export class AppComponent {
   toDoModel;
   constructor(private _router:Router, public dataService : DataService) {
  
  
  }
  
   onclck(inputValue){
    alert(inputValue)
    this.dataService.dataFromService = inputValue;
    this._router.navigate(['Second']);
   }
  
  }
  

  然后注入另一个组件并访问该值：

  import {Component,View} from 'angular2/core';
  import {DataService} from 'path/to/dataservice';
  export secondComponent{
     constructor(public dataService : DataService){
     console.log(this.dataService.dataFromService);
  }
  

  回复于 2024-04-18T15:20:41+08:00
• 0

  最好有一个后端和一个服务调用后端来获取数据 . 首先，您需要将输入数据发布到服务，并通过nodejs或数据库从某个数据库获取该数据 . 这将是基于数据的一些主键来实现这一点的最好方法，至少企业应用程序如何在现实中运行

  回复于 2024-04-18T15:20:41+08:00