Question

我在导航栏中有一个显示通知的功能，我想在另一个组件中运行相同的功能来显示最新的通知，但我不确定该过程。

我的导航栏组件，

 @Component({
    selector: 'header-Navbar',
    templateUrl: './app/navbar/navbar.html',
})
export class Navbar implements OnInit  {
    notification : any;
    header :any;
    constructor(public http: Http, fbld: FormBuilder, public config: Config,public router: Router) {
    ngOnInit(){
        this.getnotifications();
    }
    getnotifications(){
         var headers = new Headers();
        headers.append('Content-Type', 'application/json')
        this.http.get(this.header + 'getcategorynotificationscountbyuserid/'+this.user.username, { headers: headers })
            .subscribe(
            response => {
                if (response.json().error_code == 0) {
                    this.notification = response.json().result;

                    }
                 else { 
                   if(response.json().result == 0){
                        this.notification == undefined;
                    }
                }
            });
    }

我的帖子组件，

export class Posts {
  showseemore: any = true;
articleform: FormGroup;
commentform: FormGroup;
constructor(private route: ActivatedRoute,public _navbar : Navbar,public  _notifications : GetNotifications, public router: Router, public http: Http, public config: Config, fbld: FormBuilder) {}
  //Here i want to load getnotifications() function of navbar component ////

任何人都可以提供帮助。

Answer 1

您可以创建一个在Navbar和Posts组件之间共享的服务，您可以在其中定义Observable，以便您可以从Navbar订阅该Observable并在执行某些操作时执行某些操作你从“帖子”中获得了一些价值。

// common.service.ts

import { Injectable, Inject } from '@angular/core';
import { Subject }    from 'rxjs/Subject';
@Injectable()
export class CommonService {
  private notify = new Subject<any>();
  /**
   * Observable string streams
   */
  notifyObservable$ = this.notify.asObservable();

  constructor(){}

  public notifyOther(data: any) {
    if (data) {
      this.notify.next(data);
    }
  }
}

//导航栏

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

import { CommonService } from './common.service';

@Component({
  selector: 'header-Navbar',
  templateUrl: './app/navbar/navbar.html',
})
export class Navbar implements OnInit, OnDestroy {

  notification : any;
  header :any;
  private subscription: Subscription;

  constructor(public http: Http, fbld: FormBuilder, public config: Config,public router: Router, private commonService: CommonService) {

  ngOnInit(){
    this.getnotifications();
  }

  getnotifications(){
    let headers = new Headers();
    headers.append('Content-Type', 'application/json')
    this.http.get(this.header + 'getcategorynotificationscountbyuserid/' + this.user.username, { headers: headers }).subscribe(
        response => {
            if (response.json().error_code == 0) {
                this.notification = response.json().result;

                }
             else { 
               if(response.json().result == 0){
                    this.notification == undefined;
                }
            }
        });

    this.subscription = this.commonService.submitObservable$.subscribe((res) => {
      if (res.hasOwnProperty('option') && res.option === 'get_notification') {
        console.log(res.value);
        // perform your other action from here
        this.getnotifications();
      }
    });
  }

  ngOnDestroy() {
    this.subscription.unsubscribe();
  }
}

//帖子

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

import { CommonService } from './common.service';

@Component({
  selector   : 'posts',
  templateUrl : './posts.html'
})
export class Posts implements OnInit, OnDestroy {
  constructor( private commonService: CommonService ){
  }

  ngOnInit() {
    this.commonService.notifyOther({option: 'get_notification', value: 'From Navbar'});
  }
}

如何在另一个组件中加载一个组件的功能

1 个答案: