如何将标头组件函数调用到角度 2 中的另一个组件？

Question

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

header.component.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 Services始终是最佳选择（有时也是唯一选择）。

通过上述服务，可以隐藏您的标题的组件不必相互了解，您可以使它们完全可重用。

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

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

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

Answer 2

在您的父组件中使用 viewChild 。

在您的应用程序组件中 -

@ViewChild(HeaderComponent) headerComponent : HeaderComponent;

然后使用

headerComponent.headerMethodName(); 

您要调用的 HeaderComponent 中的任何方法。

Answer 3

您将需要使用EventEmitter 。

@component({
  selector:'app-header',
})
export class HeaderComponent {

  public showmodel(displayType): void {
        this.visible = true;                    
        this.visibleAnimate = true
  }

}

现在说在第二个组件中，您在单击按钮时发出事件。

@component({
  selector:'another component',
  template: `<button (click)="callShowModel()">click</button>`
)
export class com2{
  @Output() evt = new EventEmitter();
  callShowModel(){
     this.evt.emit(<value>);
  }
}

现在您的事件可以连接到父组件中

<headercomponent (evt)="showmodel($event)"></headercomponent>

Answer 4

由于 Angular 2 基于组件和组件交互，因此了解数据如何从一个组件传递到另一个组件非常重要。 数据使用属性绑定在组件之间传递。 看看下面的语法：

<user [value]="user"></user>

value 是当前组件的属性，user 是访问另一个组件的属性

你应该使用 @Input 属性

import {Component, Input} from 'angular2/angular2'

export Class exampleComponent{
  @Input() user: any ;
}

Answer 5

只需使用此代码：在您的组件中

@ViewChild(HeaderComponent, { static: true }) headerComponent: HeaderComponent;

然后使用：

this.headerComponent.anyheaderMethod();

这肯定会有所帮助