将数据从一个组件传递到另一个组件并反映在视图中答案

【问题标题】：Pass data from one component to another and reflect in view将数据从一个组件传递到另一个组件并反映在视图中
【发布时间】：2017-07-12 03:03:52
【问题描述】：

在我的项目中，我有两个组件

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() 传递给服务

我需要将此值传递给第二个组件

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。

【问题讨论】：

标签： angular typescript visual-studio-code

【解决方案1】：

最好使用 observable 主动通知订阅者有关值的变化：

@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);
   }
 }

【讨论】：

我添加了 import { BehaviorSubject } from 'rxjs';私有 myValue = new BehaviorSubject(); public myValue$ = this.myValue.asObservable();它显示错误，例如，提供的参数与调用目标的任何签名都不匹配。）
private myValue = new BehaviorSubject();
现在没有错误，但是视图没有更新，是不是因为我错过了什么？。
你说的是selected name is: {{selectedName}}，这是Component2Components 模板的一部分吗？
是的，这部分是component2的html代码，当点击来自component1的div时，点击的名称应该设置为“选定的名称是：{{selectedName}}”我使用服务将此名称设置为组件2.

【解决方案2】：

Angular 文档讨论了使用 @Input 绑定 [https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#parent-to-child][1]

在您的组件 1 html 格式 id 和方括号内的名称以及将 div 标记替换为组件 2 选择器标记的名称

<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>

【讨论】：