7

Bir giriş alanı ve düğmem olduğu bir bileşen hazırlıyorum. Düğmeyi tıklattığımda ikinci bileşene de daldırma yapıyorum. Bir bileşenden diğerine veri göndermek istiyorum?Bir bileşenden diğerine değer nasıl gönderilir?

Bir bileşenden diğerine nasıl veri göndereceğim .. Giriş değerini (giriş alanında ne tür bir kullanıcı tipi) göstermem gerekiyor. Sonraki bileşen veya sonraki sayfada göstermem gerekiyor. Düğmesine tıklayın. ? burada plunker olduğunu 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']); 
    } 

} 

cevap

16

Oh !! soruya cevap vermek için çok geç olabilir miyim? Ancak boşver. Bu, paylaşımlı hizmetle kullanılan Yönlendirici, Paylaşılan Hizmet ve Paylaşılan nesne kullanılarak bileşenler arasında veri paylaşmanıza yardımcı olabilir. Umarım bu kesinlikle yardımcı olacaktır.

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 ve paylaşılan nesne

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; 
    } 
} 
+0

paylaşmak misiniz verilerin bazı birincil anahtar dayalı olduğunu almanın en güzel yolu olurdu . Teşekkürler Bu cevap için @micronyks. :) :) – ananya

+0

@ananya bu harika yardımcı oldu. – micronyks

3

Eğer bir hizmet yapmak hem bileşenler enjekte, veriable hizmet ve diğer bileşen erişimine bunu giriş değeri atamak yapmanız gereken tek şey. Üzgünüm kardeşim ama plunker oluşturmayı bilmiyorum. İşte kod:

DÜZENLEME:

export class DataService{ 
    dataFromService;} 

Sonra ilk bileşende bu enjekte:

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

} 

Sonra başka bileşen ve erişimde enjekte

Öncelikle bu veri hizmeti yapmak değer:

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

i bu çözüm buldu tam olarak ne ben arıyordum for.Thanks Allah budur plunker – user944513

0

herşey daha iyi veri almak için bir arka uç ve bir hizmet çağıran arka uç sahip olmak. önce giriş verisini servise göndermeniz ve bu verileri nodejs veya veritabanı üzerinden bazı veritabanlarından almanız gerekir. Yani en az kurumsal uygulamalar gerçekte nasıl çalıştığını

İlgili konular