angular 4 无组件间传递数据 input\output

Question

我正在尝试在 angular 4 中的组件之间传递数据。我不想使用 input\output。在 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

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

Answer 3

您可以使用 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() {

  }

}

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

你用这样的东西来做

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

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

angular 4 无组件间传递数据 input\output

angular 4 pass data between components without input\output

angular2-components

angular