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传递值。

.hoverelement span:hover {
  font-size:20px;
}

然后您的SharedService是：

   @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();
                     });

             }
    }

在组件通信方面，

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

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（）;

这肯定会帮助

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

5 个答案: