Question

您好我正在尝试将所选值（来自选项）从第一个组件传递到第二个组件，但我在第二个组件中获取值时遇到问题。

我目前正在使用服务这样做并且是console.logging everythign以查看我是否传递了该值。

所有东西都按照我打算加载到第二个组件。

以下是我的代码

第一个组件HTML

 <p class="fonts-title"> Select Region</p>
 <div class="selectcontainer">
    <select (change)="passValue1()" formControlName="region" class="form- control"  class="selectionbox" [(ngModel)]="selected_region" required> 
  <option *ngFor="let region of regions | filterregion" [ngValue]="region"> 
{{region.areaName}}
</option>
</select>

第一个组件

export class SearchSelectComponent implements OnInit {

  constructor(
    private passData: TeacherPassDataService) { }

  selected_region: string;

  passValue1(val1) {
    this.passData.setValue1(val1=this.selected_region['areaCode'])
  }

服务

@Injectable()
export class TeacherPassDataService {

    value1: string;

    constructor() { 
        this.value1="",
    }

    setValue1(val1: string) {
        this.value1 = val1
        console.log(this.getValue1()) //this prints selected_region value from the first component as I intented
    }

    getValue1() {
        return this.value1;
    }

}

然而，在第二部分中，

constructor(
        private getVal: TeacherPassDataService) {
    }

   getVal1() {
       return this.getVal.getValue1(),
       this.firstVal=this.getVal1(),
       console.log(this.getVal.getValue1()) //this prints 'undefined'
    }

为什么在使用服务正确设置值时，我在第二个组件中未定义？

请帮助！

提前谢谢

Answer 1

可能您没有在appModule中添加服务作为提供者，

@NgModule({
 providers: [
 TeacherPassDataService 
 ]
})

Answer 2

请参阅随附的工作插件。我试图模仿你的用例。它使用路由来加载第二个组件。我相信它应该回答你的问题。请看一看 - https://plnkr.co/edit/w7A8RJeFPYq5rstTfXYF?p=preview

我在TeacherPassDataService中使用了以下内容 -

this.router.navigate(["/secondComponent"]);

Angular2通过服务在两个组件之间传递数据

2 个答案: