ヘッダコンポーネント関数を角度2の別のコンポーネントに呼び出す方法はありますか？

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

メイクを@Inputするために使用する必要があり、別のコンポーネント

アクセスのためのプロパティです親コンポーネントのviewChildの使用。アプリのコンポーネントで

-

@ViewChild(HeaderComponent) headerComponent : HeaderComponent; 

が、その後

headerComponent.headerMethodName(); 

呼び出したいHeaderComponentから任意の方法を使用します。

Answer 2

あなたはEventEmitterを使用する必要があります。

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

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

} 

ここで、2番目のコンポーネントでは、ボタンをクリックしてイベントを発生させます。

@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 3

としてアンギュラ2にフックアップすることができ、そのデータを別のコンポーネントから渡される方法を理解することが重要です。データは、プロパティーバインディングを使用してコンポーネント間を渡されます。以下の構文を見てみましょう：

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

値は、現在のコンポーネントとユーザーの財産であることは、あなたが財産

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

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

Answer 4

この2つの間に直接の親子関係がない場合は、共有サービスと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') 

    } 

} 

角度Servicesは、常に最良の選択肢（そして時には唯一のオプション）です。

上記のサービスでは、ヘッダーを隠すことができるコンポーネントはお互いを知る必要はなく、完全に再利用できるようにすることができます。

また、コンポーネントが破棄された場合は、サービスからの退会を忘れないようにしてください。

SharedServiceの$onHideメソッドを購読しているコンポーネントの内部にあります。

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