如何在另一个组件中调用一个组件的功能

Question

我有 2 个组件导航栏和登录，我想在登录组件的导航栏中调用一个函数，到目前为止我尝试了这个但没有成功...... 我的 navbar.ts，

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

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

    constructor(public router: Router) {

    } 
    get(){
         if (this.user == null) {
            this.showstartupbuttons = true;
            this.showsicons = false;
        }
        else {
            this.username = this.user.username;
            this.showsicons = true;
            this.showstartupbuttons = false; 
        }
    }

我的 login.ts，

import {Component, OnInit} from '@angular/core';
@Component({
    templateUrl: './app/login/login.html',
    providers:[Navbar]
})
export class Login implements onInit{
    ckeditorContent:any;
    constructor(public navbar:Navbar) {}
      ngOnInit(){
           this.navbar.get();
      }

我使用了提供程序，但我不确定这些过程。任何人都可以建议帮助。

Answer 1

您可以将服务用于这样的组件交互。

import { Subject }    from 'rxjs/Subject';
import { Injectable } from '@angular/core';

@Injectable()
export class NavbarService{
    private getSource = new Subject<any>();
    get$ = this.getSource.asObservable();

    triggerNavbarGet(){
        this.getSource.next(null);
    }
}

您需要将此服务注入到导航栏和登录。请记住，每个提供者的服务都是单例的。所以这个服务需要由一个同时包含导航栏和登录的组件来提供。

在您的导航栏组件上：

constructor(public router: Router, navbarService: NavbarService) {
    navbarService.get$.subscribe(param => {this.get();})
}

您可以在您的登录组件上触发此功能，例如

constructor(public navbar:Navbar, private navbarService: NavbarService) {}
      ngOnInit(){
           this.navbarService.triggerNavbarGet();
      }

更多关于组件交互here。