Question

我有两个组件导航栏和登录，我想在登录组件的navbar中调用一个函数，到目前为止我尝试了这个但是确实没有工作...... 我的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。

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

1 个答案: