Question

我想将值从选择列表-ListComponentComponent传递到同级组件-DisplayComponentComponent，并在DisplayComponentComponent模板中显示该值。我想为此使用共享服务。我创建了服务，并传递了变更的价值。但是，当我想在显示组件中console.log这个值时，我什么都看不到。这是我的代码。

显示组件

export class DisplayComponentComponent implements OnInit {
  val: any;
  constructor(private myService: MyServiceService) { }

  ngOnInit() {
    this.myService.val.subscribe(result => {
        this.val = result
      });
  }
}

列表

export class ListComponentComponent implements OnInit {
  list: any;
  selected: string;
  constructor(private myService: MyServiceService) { }

  ngOnInit() {
    this.list = [
      {
        text: 'test1',
        value: 'test1'
      },
      {
        text: 'test2',
        value: 'test2'
      },
      {
        text: 'test3',
        value: 'test3'
      }
    ]
    this.selected = this.list[0].value;
    this.myService.update(this.selected);
  }
  getSelected(val) {
    this.selected = val;
    this.myService.update(this.selected);
  }
}

服务

@Injectable()
export class MyServiceService {
  public source = new Subject<any>();
  val = this.source.asObservable();

  update(input: any) {
     this.source.next(input);
  }
  constructor() { }

}

该值应显示在这里：

<p>
  {{result}}
</p>

https://stackblitz.com/edit/angular-7lhn9j?file=src%2Fapp%2Fmy-service.service.ts

Answer 1

如果要在应用程序加载时显示值，则需要将主题更改为BehaviorSubject

    private _onChanged: BehaviorSubject<any> = new BehaviorSubject({});
    public val= this._onChanged.asObservable(); 

  update(input: any) { 
     this._onChanged.next(input);
  }
  constructor() { }

Demo

Answer 2

您必须在display-component.component.html部分绑定正确的值：

<p>
  {{val}} <!--not {{result}}-->
</p>

Answer 3

我在您的代码中发现了一个小问题。代替波纹管

<p>
  {{result}}
</p>

您应该使用

 <p>
   {{val}}
 </p>

Answer 4

值正在更新，一切正常。

val: any;
  constructor(private myService: MyServiceService) { }

  ngOnInit() {
    this.myService.val.subscribe(result => {
      console.log(result);
        this.val = result
      });
  }

在HTML中，您使用的是{{result}}，没有这样的变量，而是使用{{val}}或更改变量名称

result: any;
  constructor(private myService: MyServiceService) { }

  ngOnInit() {
    this.myService.val.subscribe(res => {
      console.log(result);
        this.result = res
      });
  }

使用共享服务将价值传递给同级组件

4 个答案: