分类导航

Angularjs 发布时间：2022-04-20 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了angular – 如何将值从一个组件发送到另一个组件？，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

我制作了一个组件,其中我有一个输入字段和按钮.单击按钮我正在绘制第二个组件.我想将数据从一个组件发送到另一个组件？

我将如何将数据从一个组件发送到另一个组件.我需要发送输入值(输入字段中的用户类型)我需要在下一个组件或下一页显示.单击按钮.如何发送数据？
这是我的傻瓜
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']);
  }

}

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

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,bind(APP_BASE_HREF).toValue(LOCATIOn.path@R_489_8313@
    ]);

FirstComponent

import {Component,View,binD} from 'angular2/core';
import {SharedservicE} from 'src/sharedservice';
import {Router,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,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.@R_489_8313@;
    this.sharingData.name=str; 
  }
  getData:string()
  {
    console.log('get data function called');
    return this.sharingData.name;
  }
}