10

入力フィールドとボタンが 1 つあるコンポーネントを作成します。ボタンをクリックすると、2 番目のコンポーネントが表示されます。あるコンポーネントから別のコンポーネントにデータを送信したいですか?

あるコンポーネントから別のコンポーネントにデータを送信する方法..次のコンポーネントまたは次のページに表示する必要がある入力値 (ユーザーが入力フィールドに入力したもの) を送信する必要があります。ボタンをクリックすると、データを送信する方法は? ここに私のプランカーがあります http://plnkr.co/edit/IINX8Zq8J2LUTIyf4DYD?p=preview

import {Component,View} from 'angular2/core';
import {Router} from 'angular2/router';

@Component({
    templateUrl: 'home/home.html'
})


export class AppComponent {
   toDoModel;
  constructor(private _router:Router) {


  }

  onclck(inputValue){
    alert(inputValue)
    this._router.navigate(['Second']);
  }

}
4

3 に答える 3

22

おー！！質問に答えるには遅すぎるかもしれません！しかし、気にしないでください。これは、ルーター、共有サービス、および共有サービスで使用される共有オブジェクトを使用して、コンポーネント間でデータを共有するのに役立つ場合があります。これがきっと役立つことを願っています。

答え

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)
    ]);

最初のコンポーネント

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']);
  }

}

2 番目のコンポーネント

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 と共有オブジェクト

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;
  }
}
于 2016-01-15T08:43:02.450 に答える
6

サービスを作成し、それを両方のコンポーネントに注入し、入力値をサービス veriable に割り当てて、他のコンポーネントでアクセスするだけです。申し訳ありませんが、プランカーの作成方法を知りません。コードは次のとおりです。

編集 ：

最初にこのデータ サービスを作成します。

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);
}
于 2016-01-15T05:26:13.323 に答える
0

バックエンドと、データを取得するためのバックエンドを呼び出すサービスを用意することを常にお勧めします。まず、入力データをサービスに投稿し、nodejs またはデータベースを介してデータベースからそのデータを取得する必要があります。これは、少なくともエンタープライズアプリが実際にどのように機能するかをデータの主キーに基づいて取得する最も良い方法です。

于 2017-12-04T19:34:04.603 に答える