傳遞數據從一個組件到另一個鑑於

component1.ts

import { Component, OnInit } from '@angular/core'; 
import { MyserviceService } from '../myservice.service'; 

@Component({ 
selector: 'app-component1', 
templateUrl: './component1.component.html', 
styleUrls: ['./component1.component.css'] 
}) 
export class Component1Component implements OnInit { 

constructor(private Service: MyserviceService) { } 
employee = [ 
{ id: '001', name: 'michael' }, 
{ id: '002', name: 'john' }, 
{ id: '003', name: 'james' }, 
{ id: '004', name: 'joe' }, 
]; 
ngOnInit() { 
} 

onSelect(name) { 
    alert(name); 
    this.Service.setValue(name); 
} 
}

HTML

<div *ngFor="let emp of employee" (click)="onSelect(emp.name)"> 
Id: {{emp.id}} <br /> 
Name: {{emp.name}} 
</div>

這裏的onclick emp.name傳遞給服務通過onselect（）

我需要此val UE被傳遞到第二部件

component2.ts

import { Component, OnInit } from '@angular/core'; 


@Component({ 
selector: 'app-component2', 
templateUrl: './component2.component.html', 
styleUrls: ['./component2.component.css'] 
}) 
export class Component2Component implements OnInit { 
private selectedName: string; 
constructor() { } 

    ngOnInit() { 
    } 
    }

HTML

<p> 
selected name is: {{selectedName}} 
</p>

服務代碼是：

import { Injectable } from '@angular/core'; 

@Injectable() 
export class MyserviceService { 
private myValue; 
    constructor() { } 
    setValue(val) { 
    this.myValue = val; 

    } 

    getValue() { 
    return this.myValue; 
} 
}

我需要在COMPONENT2 HTML代碼來顯示名稱作爲變量selectedName。

來源

2017-02-22 Basil Joy

這是最好使用可觀察到主動通知有關價值變化的用戶：

@Injectable() 
export class MyserviceService { 
    private myValue = new BehaviorSubject<String>(null); 
    public myValue$ = this.myValue.asObservable(); 
}

export class Component2Component implements OnInit { 
private selectedName: string; 
    constructor(service:MyserviceService) { 
    this.service.myValue$.subscribe(val => this.selectedName = val); 
    } 
}

來源

2017-02-22 07:29:52

我已添加 import'BehaviorSubject} from'rxjs'; private myValue = new BehaviorSubject （）; public myValue $ = this.myValue.asObservable（）; 它顯示錯誤，如提供的參數不匹配任何調用目標的簽名。） –

什麼行會導致此錯誤？ –

private myValue = new BehaviorSubject （）; –

角文檔會談有關使用@input綁定 [https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#parent-to-child][1]

在您的組件1 HTML格式ID和名稱在方括號內，並用組件2的名稱替換div標籤選擇標籤

<app-component2 *ngFor="let emp of employee" (click)="onSelect(emp.name)" 
    [hero]="hero" 
    [master]="master"> 
</app-component2>

在組件2的.ts文件中添加一個進口和輸入變量

import { Component, Input } from '@angular/core'; 


export class Component2Component { 
    @Input() Id: string; 
    @Input() Name: string; 
}

在組件2 HTML

<p> 
selected name is: {{Name}} 
</p>

來源

2017-02-22 08:36:53

試試這個：

組件1：

onSelect(name) { 
    this.Service.setValue(name); 
}

服務：

private myValue = new Subject<String>(null); 
public myValue$ = this.myValue.asObservable(); 

setValue(val) { 
    this.myValue.next(val); 
}

組分2：

constructor(private Service:MyserviceService) { 
    this.Service.myValue$.subscribe(val => this.selectedName = val); 
}

更多關於共享服務和其他組件交互here的上述例子。

來源

2017-02-22 11:01:35 Alex

傳遞數據從一個組件到另一個鑑於

回答

相關問題