角度 4 在没有输入\输出的组件之间传递数据

Question

我正在尝试在角度 4 的组件之间传递数据。 我不想使用输入\输出。 在 Homecomponent 我想将数据推送到服务中，在 page2 组件中我想从服务中获取数据。 我只是看着 observable 和 subject 的方式，我试图实现它但没有成功。

主页组件

    import { ClientService } from './../clinet-service.service';
import { Component, OnInit } from '@angular/core';
@Component({
  selector: 'page-home',
  template: 'pages/home/home.html',
})
export class HomeComponent implements OnInit {

  clients = ['john', 'jane']
  clientFound = false

  // constructor(private navController: NavController) { }
  constructor(private clientService: ClientService) {

  }

  openClient(client) {
  }
  ngOnInit() {
    this.clientService.subject.next([
      { name: 'Harold', age: 35 }
    ]
    );

}

}

page2组件

import { ClientService } from './../clinet-service.service';
import { Component } from '@angular/core';
@Component({
  selector: 'page-2',
  template: '{{clients}}'
})
export class Page2Component {
  client:any;

  constructor(  private clientService: ClientService) {

  }

  ngOnInit(){
    debugger
    let clients = this.clientService.observable.subscribe(clients => console.log(clients));
  }
}

客户服务

import { Injectable, OnInit, OnDestroy } from '@angular/core';
import { Subject } from 'rxjs/Subject';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';
import { Observable } from "rxjs/Observable";

@Injectable()

export class ClientService {
  subject: Subject<any> = new Subject<any>();
  observable: Observable<any> = this.subject.asObservable();


}

实际上我不喜欢这种实现方式，因为我尝试制作简单的东西，例如将数据推送到服务并在其他组件中获取它，但我做不到。

Answer 1

你不能这样做，因为你让它变得不必要的复杂。这是你应该做的：

主页组件

ngOnInit() {
    this.clientService.subject.next([{
      {name: 'Harold', age: 35 },
      {name: 'Kumar', age: 40 },
    }]);
}

page2Component

ngOnInit(){
  let clients = this.clientService.observable.subscribe(clients => console.log(clients));
}

服务

export class ClientService {

  subject: Subject<any> = new Subject<any>();
  observable: Observable<any> = this.subject.asObservable();

  constructor() {}
}

Answer 2

您可以使用 rxjs 主题在任何组件之间传递数据。像这样在您的服务中创建新的 rxjs 主题

import { Subject } from 'rxjs/Subject';
@Injectable()
export class MyService {

    myNewSubject = new Subject<any>();

    informDataChanges(passyourobject){
      this.myNewSubject.next(passyourobject);
  }

}

当您的组件发生更改或您想将数据传递给另一个组件时，只需从您的组件调用此服务函数并将数据作为参数传递给此函数。你可以用这样的东西来做到这一点

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

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

      constructor( private myService: MyService) { }

      someFunction(){
        this.myService.informLogout('somedata');//Passing data to service here
      }

  ngOnInit() {

  }

}

现在您需要做的就是在另一个组件中订阅该数据。重要的主题会持续关注它的任何变化，并且数据将是连续的流并且它会被自动订阅。所以最好在构造函数中订阅主题，更改会立即反映在该组件中。

你用这样的东西来做

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

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

          constructor( private myService: MyService) {
            this.myService.myNewSubject.subscribe(data=>{
             console.log(data);
       }) 
}

这样您可以在任意数量的组件之间传递数据，并且任意数量的组件都可以使用相同的主题。

Answer 3

你的 HomeComponent 装饰器坏了。使用外部模板文件时，需要使用templateUrl 而不是template。

错误

@Component({
  selector: 'page-home',
  template: 'pages/home/home.html',
})

正确

@Component({
  selector: 'page-home',
  templateUrl: 'pages/home/home.html',
})

https://angular.io/api/core/Component