如何在angular2中调用另一个组件函数

Question

我有如下两个组件，我想从另一个组件调用一个函数。这两个组件都包含在使用指令的第三个父组件中。

组件 1：

@component(
    selector:'com1'
)
export class com1{
    function1(){...}
}

组件 2：

@component(
    selector:'com2'
)
export class com2{
    function2(){...
        // i want to call function 1 from com1 here
    }
}

我尝试过使用 @input 和 @output 但我不明白如何使用它以及如何调用该函数，有人可以帮忙吗？

Answer 1

这取决于您的组件（父/子）之间的关系，但使组件通信的最佳/通用方法是使用共享服务。

有关详细信息，请参阅此文档：

https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#bidirectional-service

也就是说，您可以使用以下方法将 com1 的实例提供到 com2 中：

<div>
  <com1 #com1>...</com1>
  <com2 [com1ref]="com1">...</com2>
</div>

在com2中，可以使用如下：

@Component({
  selector:'com2'
})
export class com2{
  @Input()
  com1ref:com1;

  function2(){
    // i want to call function 1 from com1 here
    this.com1ref.function1();
  }
}

Answer 2

如果 com1 和 com2 是兄弟姐妹，您可以使用

@component({
  selector:'com1',
})
export class com1{
  function1(){...}
}

com2 使用 EventEmitter

发出事件

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

这里父组件添加一个事件绑定来监听myEvent事件，然后当这样的事件发生时调用com1.function1()。 #com1 是一个模板变量，允许从模板的其他地方引用这个元素。我们使用它来使 function1() 成为 myEvent of com2:

的事件处理程序

@component({
  selector:'parent',
  template: `<com1 #com1></com1><com2 (myEvent)="com1.function1()"></com2>`
)
export class com2{
}

有关组件之间通信的其他选项，另请参阅 component-interaction

Answer 3

假设第一个组件是 DbstatsMainComponent
第二个组件 DbstatsGraphComponent。
第一个组件调用第二个组件的方法

<button (click)="dbgraph.displayTableGraph()">Graph</button> <dbstats-graph #dbgraph></dbstats-graph>

注意子组件上的局部变量 #dbgraph，父组件可以使用它来访问其方法 (dbgraph.displayTableGraph())。

Answer 4

组件 1（儿童）：

@Component(
  selector:'com1'
)
export class Component1{
  function1(){...}
}

组件 2（父级）：

@Component(
  selector:'com2',
  template: `<com1 #component1></com1>`
)
export class Component2{
  @ViewChild("component1") component1: Component1;

  function2(){
    this.component1.function1();
  }
}

Answer 5

您可以从组件二访问组件一的方法..

componentOne

  ngOnInit() {}

  public testCall(){
    alert("I am here..");    
  }

componentTwo

import { oneComponent } from '../one.component';


@Component({
  providers:[oneComponent ],
  selector: 'app-two',
  templateUrl: ...
}


constructor(private comp: oneComponent ) { }

public callMe(): void {
    this.comp.testCall();
  }

componentTwo html 文件

<button (click)="callMe()">click</button>

Answer 6

首先，您需要了解组件之间的关系。然后你可以选择正确的沟通方式。我将尝试解释我在实践中了解和使用的组件间通信的所有方法。

组件之间可以有什么样的关系？

1. Parent > Child

通过输入共享数据

这可能是最常用的数据共享方法。它通过使用 @Input() 装饰器来允许数据通过模板传递。

parent.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'parent-component',
  template: `
    <child-component [childProperty]="parentProperty"></child-component>
  `,
  styleUrls: ['./parent.component.css']
})
export class ParentComponent{
  parentProperty = "I come from parent"
  constructor() { }
}

child.component.ts

import { Component, Input } from '@angular/core';

@Component({
  selector: 'child-component',
  template: `
      Hi {{ childProperty }}
  `,
  styleUrls: ['./child.component.css']
})
export class ChildComponent {

  @Input() childProperty: string;

  constructor() { }

}

这是一个非常简单的方法。它很容易使用。我们还可以使用 ngOnChanges 捕捉 child 组件中数据的变化。

但是不要忘记，如果我们使用一个object作为数据并改变这个object的参数，对它的引用不会改变。因此，如果我们想在 child 组件中接收修改后的 object，它必须是不可变的。

2。 Child > Parent

通过视图共享数据Child

ViewChild 允许将一个组件注入到另一个组件中，使 parent 可以访问其属性和功能。但是，需要注意的是 child 在视图初始化之前不可用。这意味着我们需要实现 AfterViewInit 生命周期钩子来接收来自 child.

的数据

parent.component.ts

import { Component, ViewChild, AfterViewInit } from '@angular/core';
import { ChildComponent } from "../child/child.component";

@Component({
  selector: 'parent-component',
  template: `
    Message: {{ message }}
    <child-compnent></child-compnent>
  `,
  styleUrls: ['./parent.component.css']
})
export class ParentComponent implements AfterViewInit {

  @ViewChild(ChildComponent) child;

  constructor() { }

  message:string;

  ngAfterViewInit() {
    this.message = this.child.message
  }
}

child.component.ts

import { Component} from '@angular/core';

@Component({
  selector: 'child-component',
  template: `
  `,
  styleUrls: ['./child.component.css']
})
export class ChildComponent {

  message = 'Hello!';

  constructor() { }

}

通过 Output() 和 EventEmitter 共享数据

另一种共享数据的方法是从 child 发出数据，这些数据可以由 parent 列出。当您想要共享发生在按钮点击、表单输入和其他用户事件上的数据更改时，这种方法是理想的。

parent.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'parent-component',
  template: `
    Message: {{message}}
    <child-component (messageEvent)="receiveMessage($event)"></child-component>
  `,
  styleUrls: ['./parent.component.css']
})
export class ParentComponent {

  constructor() { }

  message:string;

  receiveMessage($event) {
    this.message = $event
  }
}

child.component.ts

import { Component, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'child-component',
  template: `
      <button (click)="sendMessage()">Send Message</button>
  `,
  styleUrls: ['./child.component.css']
})
export class ChildComponent {

  message: string = "Hello!"

  @Output() messageEvent = new EventEmitter<string>();

  constructor() { }

  sendMessage() {
    this.messageEvent.emit(this.message)
  }
}

3。兄弟姐妹

Child > Parent > Child

我尝试在下面解释兄弟姐妹之间交流的其他方式。但是你可能已经明白了理解上述方法的一种方法。

parent.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'parent-component',
  template: `
    Message: {{message}}
    <child-one-component (messageEvent)="receiveMessage($event)"></child1-component>
    <child-two-component [childMessage]="message"></child2-component>
  `,
  styleUrls: ['./parent.component.css']
})
export class ParentComponent {

  constructor() { }

  message: string;

  receiveMessage($event) {
    this.message = $event
  }
}

child-one.component.ts

import { Component, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'child-one-component',
  template: `
      <button (click)="sendMessage()">Send Message</button>
  `,
  styleUrls: ['./child-one.component.css']
})
export class ChildOneComponent {

  message: string = "Hello!"

  @Output() messageEvent = new EventEmitter<string>();

  constructor() { }

  sendMessage() {
    this.messageEvent.emit(this.message)
  }
}

child-two.component.ts

import { Component, Input } from '@angular/core';

@Component({
  selector: 'child-two-component',
  template: `
       {{ message }}
  `,
  styleUrls: ['./child-two.component.css']
})
export class ChildTwoComponent {

  @Input() childMessage: string;

  constructor() { }

}

4.不相关的组件

我在下面描述的所有方法都可以用于组件之间关系的所有上述选项。但各有优缺点。

与服务共享数据

在没有直接连接的组件之间传递数据时，例如兄弟姐妹、祖母children 等，您应该使用共享服务。当您拥有应该始终同步的数据时，我发现 RxJS BehaviorSubject 在这种情况下非常有用。

data.service.ts

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';

@Injectable()
export class DataService {

  private messageSource = new BehaviorSubject('default message');
  currentMessage = this.messageSource.asObservable();

  constructor() { }

  changeMessage(message: string) {
    this.messageSource.next(message)
  }

}

先.component.ts

import { Component, OnInit } from '@angular/core';
import { DataService } from "../data.service";

@Component({
  selector: 'first-componennt',
  template: `
    {{message}}
  `,
  styleUrls: ['./first.component.css']
})
export class FirstComponent implements OnInit {

  message:string;

  constructor(private data: DataService) {
      // The approach in Angular 6 is to declare in constructor
      this.data.currentMessage.subscribe(message => this.message = message);
  }

  ngOnInit() {
    this.data.currentMessage.subscribe(message => this.message = message)
  }

}

秒.component.ts

import { Component, OnInit } from '@angular/core';
import { DataService } from "../data.service";

@Component({
  selector: 'second-component',
  template: `
    {{message}}
    <button (click)="newMessage()">New Message</button>
  `,
  styleUrls: ['./second.component.css']
})
export class SecondComponent implements OnInit {

  message:string;

  constructor(private data: DataService) { }

  ngOnInit() {
    this.data.currentMessage.subscribe(message => this.message = message)
  }

  newMessage() {
    this.data.changeMessage("Hello from Second Component")
  }

}

与路由共享数据

有时您不仅需要在组件之间传递简单的数据，还需要保存页面的一些状态。例如，我们想在网上市场保存一些过滤器，然后复制这个 link 并发送给朋友。而我们期望它能以和我们一样的状态打开页面。第一个，也可能是最快的方法是使用 query parameters.

查询参数看起来更像 /people?id=，其中 id 可以等于任何值，您可以根据需要拥有任意数量的参数。查询参数将由 & 字符分隔。

使用查询参数时，您无需在路由文件中定义它们，它们可以命名为参数。例如，取下面的代码：

page1.component.ts

import {Component} from "@angular/core";
import {Router, NavigationExtras} from "@angular/router";

@Component({
    selector: "page1",
  template: `
    <button (click)="onTap()">Navigate to page2</button>
  `,
})
export class Page1Component {

    public constructor(private router: Router) { }

    public onTap() {
        let navigationExtras: NavigationExtras = {
            queryParams: {
                "firstname": "Nic",
                "lastname": "Raboy"
            }
        };
        this.router.navigate(["page2"], navigationExtras);
    }

}

在接收页面中，您将收到如下查询参数：

page2.component.ts

import {Component} from "@angular/core";
import {ActivatedRoute} from "@angular/router";

@Component({
    selector: "page2",
    template: `
         <span>{{firstname}}</span>
         <span>{{lastname}}</span>
      `,
})
export class Page2Component {

    firstname: string;
    lastname: string;

    public constructor(private route: ActivatedRoute) {
        this.route.queryParams.subscribe(params => {
            this.firstname = params["firstname"];
            this.lastname = params["lastname"];
        });
    }

}

NgRx

最后一种更复杂但更强大的方法是使用NgRx。该库不用于数据共享；它是一个强大的状态管理库。我无法在简短示例中解释如何使用它，但您可以访问官方网站并阅读有关它的文档。

对我来说，NgRx Store 解决了多个问题。例如，当您必须处理 observable 时，当某些 observable 数据的责任在不同组件之间共享时，store 操作和 reducer 确保始终执行数据修改 "the right way".

它还为 HTTP 请求缓存提供了可靠的解决方案。您将能够存储请求及其响应，以便您可以验证您发出的请求还没有存储响应。

您可以阅读有关 NgRx 的信息并了解您的应用是否需要它：

最后我想说的是，在选择一些分享数据的方式之前，你需要了解这些数据在未来会被如何使用。我的意思是也许现在您可以只使用 @Input 装饰器来共享用户名和姓氏。然后，您将添加需要更多用户信息的新组件或新模块（例如，管理面板）。这意味着这可能是一种更好的方式来使用用户数据服务或其他一些共享数据的方式。在开始实施数据共享之前，您需要多考虑一下。

Answer 7

使用 Dataservice 我们可以从另一个组件调用函数

Component1：我们调用函数的组件

constructor( public bookmarkRoot: dataService ) { } 

onClick(){
     this.bookmarkRoot.callToggle.next( true );
}

dataservice.ts

import { Injectable } from '@angular/core';
@Injectable()
export class dataService {
     callToggle = new Subject();
}

Component2:包含函数的组件

constructor( public bookmarkRoot: dataService ) { 
  this.bookmarkRoot.callToggle.subscribe(( data ) => {
            this.closeDrawer();
        } )
} 

 closeDrawer() {
        console.log("this is called")
    }

Answer 8

在现实世界中，场景不是调用一个简单的函数，而是调用一个具有适当值的函数。所以让我们开始吧。这就是场景用户需要从他自己的组件触发一个事件，最后他还想调用另一个组件的函数。假设两个组件的服务文件相同

componentOne.html

    <button (click)="savePreviousWorkDetail()" data-dismiss="modal" class="btn submit-but" type="button">
          Submit
        </button>

当用户点击提交按钮时，他需要在自己的组件中调用 savePreviousWorkDetail() componentOne.ts，最后他还需要调用另一个组件的函数。所以要做到这一点，可以从 componentOne.ts 调用服务 class 中的函数，当调用时，componentTwo 中的函数将被触发。

componentOne.ts

constructor(private httpservice: CommonServiceClass) {
  }

savePreviousWorkDetail() {
// Things to be Executed in this function

this.httpservice.callMyMethod("Niroshan");
}

commontServiceClass.ts

import {Injectable,EventEmitter} from '@angular/core';

@Injectable()
export class CommonServiceClass{

  invokeMyMethod = new EventEmitter();

  constructor(private http: HttpClient) {
  }

  callMyMethod(params: any = 'Niroshan') {
    this.invokeMyMethod.emit(params);
  }

}

下面是 componentTwo，它具有需要从 componentOne 调用的功能。在 ngOnInit() 中，我们必须订阅调用的方法，因此当它触发 methodToBeCalled() 时将被调用

componentTwo.ts

import {Observable,Subscription} from 'rxjs';


export class ComponentTwo implements OnInit {

 constructor(private httpservice: CommonServiceClass) {
  }

myMethodSubs: Subscription;

ngOnInit() {
    
    this.myMethodSubs = this.httpservice.invokeMyMethod.subscribe(res => {
      console.log(res);
      this.methodToBeCalled();
    });
    
methodToBeCalled(){
//what needs to done
}
  }

}

Answer 9

将可注入装饰器添加到 component2（或任何具有该方法的组件）

@Injectable({
    providedIn: 'root'
})

注入 component1（将调用 component2 方法的组件）

constructor(public comp2 : component2) { }

在 component1 中定义调用 component2 方法的方法

method1()
{
    this.comp2.method2();
}

组件 1 和组件 2 代码如下。

import {Component2} from './Component2';

@Component({
  selector: 'sel-comp1',
  templateUrl: './comp1.html',
  styleUrls: ['./comp1.scss']
})
export class Component1 implements OnInit {
  show = false;
  constructor(public comp2: Component2) { }
method1()
 {
   this.comp2.method2(); 
  }
}


@Component({
  selector: 'sel-comp2',
  templateUrl: './comp2.html',
  styleUrls: ['./comp2.scss']
})
export class Component2 implements OnInit {
  method2()
{
  alert('called comp2 method from comp1');
}

Answer 10

我在 parent 组件中使用触发器 fuction1（child 的函数）是这样的:)

分量 1(child):

@Component(
  selector:'com1'
)
export class Component1{
  function1(){...}
}

分量 2(parent):

@Component(
  selector:'com2',
  template: `<button (click)="component1.function1()"
             <com1 #component1></com1>`
)
export class Component2{
}

#component1 是模板变量。您可以将其替换为任何名称。（例如：#hello1）

Answer 11

对于不相关的组件，使用共享服务这个简单的方法。

//你的服务

private subject = new Subject<any>();
sendClickEvent() {
  this.subject.next();
}
getClickEvent(): Observable<any>{ 
  return this.subject.asObservable();
}
}

//你有按钮的组件

clickMe(){
this.YourServiceObj.sendClickEvent();
}

<button (click)="clickMe()">Click Me</button>

//接收点击事件的组件

    this.sharedService.getClickEvent().subscribe(()=>{
    this.doWhateverYouWant();
    }

)

如何在angular2中调用另一个组件函数

How to call another components function in angular2

angular2-components

angular