angular - 如何在 Angular 2 中调用 header 组件函数到另一个组件？

Question

我想从另一个组件调用showmodel(displayType)。如何调用另一个组件的头组件函数？

header.compoent.ts

    import { Component,Renderer } from '@angular/core';
    import { Title,DOCUMENT  } from '@angular/platform-browser';
    import { CountriesService } from '../services/countries.services';
    import { Router,ActivatedRoute, Params } from '@angular/router';
    import {  AuthenticationService } from '../services/authentication.service';
    import { Observable } from 'rxjs/Observable';
    import {FacebookService, InitParams, LoginResponse,LoginOptions} from 'ngx-facebook';


    @Component({
      moduleId: module.id,
      selector: 'app-header',
      templateUrl: 'header.component.html',
      styleUrls: ['../app.component.css'],
    })
    export class HeaderComponent {    


        public visible = false;
        public visibleAnimate = false;
        public visibleRegister = false;
        public visibleAnimateRegister = false;

        registerformcont= false;
        registerActive = true;
        loginactive = false;
        currentUser: any = {};
        PopupTitle='';
        callBackfunc='';
        responseNameCheck:any={};
        LoginOptions:any={};
        response:any={};
        FacebookResponse:any={};

     constructor(
            title: Title,
            private countriesService: CountriesService,
            private Router: Router,
            private authenticationService: AuthenticationService,   
            private fb: FacebookService

     ) {  

        let initParams: InitParams = {
          appId      : '*********',
          cookie     : true,
          xfbml      : true,
          version    : 'v2.8'
        };

        fb.init(initParams);

            Router.events.subscribe((val) => {
                 this.searchResultCont  = false;    
                  this.showStyle = false;  
                });
     }

    ngOnInit() {    

            this.currentUser = JSON.parse(localStorage.getItem('currentUser'));
            if(this.currentUser){
                this.loginStatus = this.currentUser.status;
            }
    }




        public showmodel(displayType): void {


            this.visible = true;                    
            this.visibleAnimate = true

      }


      public hide(): void {
          this.visibleAnimate = false;          
          setTimeout(() => this.visible = false, 300);      
      }



    }

app.component.ts

 @Component({ 
  selector: 'my-app',
  template: `
    <app-header></app-header>
    <router-outlet></router-outlet>    
    <app-footer></app-footer>`,
  styleUrls: ['../app/app.component.css'],
})

export class AppComponent { 

}

Answer 1

如果这两者之间没有直接的父子关系，则必须使用共享服务和 eventEmitter 来传递值。

@Component({
  moduleId: module.id,
  selector: 'app-header',
  templateUrl: 'header.component.html',
  styleUrls: ['../app.component.css'],
})

export class HeaderComponent {    
  this.subs    
  constructor(private sharedService:SharedService){

  this.subs = this.sharedService.onHide$.subscribe(()=>{ 
      this.hide(); 
    });
  }
}

然后你的 SharedService 是:

@Injectable()
export class SharedService{
  public onHide$ = new EventEmitter<boolean>()
}

@Component({})
export class YourOtherComponent{
  constructor(private sharedService:SharedService){ }

  hideIt(){
    this.sharedService.onHide$.emit('hide it baby')
  }
}

在组件通信方面，Angular 服务始终是最佳选择(有时是唯一选择)。

通过上述服务，可以隐藏您 header 的组件不必彼此了解，并且您可以使它们完全可重用。

而且，如果您的组件被破坏，请不要忘记取消订阅您的服务。

在任何订阅 SharedService 的 $onHide 方法的组件内。

ngOndestroy(){
  this.subs.unsubscribe();
}