调用函数从一个组件到另一个组件Angularjs 2 [英] Call function from one component to another component Angularjs 2

问题描述

我想将值从一个组件传递到另一个组件。

即，我需要将值从Dashboard组件传递到标头组件

这是我的信息中心组件

  import {Component} from' @角/芯';来自'../../layout/header.component'的
 import {Header}; 
导出类仪表板{
 showAlert（id：any）
 {
 setItem（id）; 
} 
} 
  

这是我的标题组件

 从'@ angular / core'导入{Component，OnInit}; 
 @Component（{
 selector：'header'，
 templateUrl：'。/ header.component.html'，
}）
导出类标题{
 public setItem（id：any）
 {
 console.log（'导出值'+ id）
} 
} 
  

但总是给予找不到setItem

什么是我正在做的错误，我该如何解决这个问题？

注意：我在Angularjs 2中这样做

解决方案

如果元素引发事件，您可以使用事件绑定来侦听它们。请参阅角度文档 https://angular.io/guide/template-syntax#event <-b>

信息中心组件

 从'@ angular / core'导入{Component};来自'../../layout/header.component'的
 import {Header}; 
 @Component（{
 selector：'dashboard'，
 templateUrl：'./dashboard.component.html'，
}）
 export class Dashboard {
 @Output（）setItemEvent = new EventEmitter（）; 
 
 showAlert（id：any）
 {
 this.setItemEvent.emit（id）; 
} 
} 
  

标题组件

 从'@ angular / core'导入{Component，OnInit}; 
 @Component（{
 selector：'header'，
 template：'< dashboard（setItemEvent）=setItem（param）>< / dashboard>'，
}）
导出类标题{
 public setItem（id：any）
 {
 console.log（'导出值'+ id）
} 
} 
  

I want to pass value from one component to another component.

i.e., I need to pass value from Dashboard Component to Header Component

Here is my Dashboard Component

import{Component}from '@angular/core';
import { Header } from '../../layout/header.component';
export class Dashboard{
showAlert(id : any)
  {
      setItem(id);
  }
}

Here is my Header component

import { Component, OnInit } from '@angular/core';
@Component({
  selector: 'header',
  templateUrl: './header.component.html',
})
export class Header{   
  public setItem(id : any)
  {
    console.log('Exported value'+id)
  }
}

But it is always giving Cannot find setItem

What is the mistake i am doing and how can i fix this ?

Note : I am doing this in Angularjs 2

解决方案

If the element raises events, you can listen to them with an event binding. Refer to the angular doc https://angular.io/guide/template-syntax#event-binding for in depth knowledge.

Dashboard Component

import{Component}from '@angular/core';
import { Header } from '../../layout/header.component';
@Component({
  selector: 'dashboard',
  templateUrl: './dashboard.component.html',
})
export class Dashboard{
  @Output() setItemEvent  = new EventEmitter();

showAlert(id : any)
  {
      this.setItemEvent.emit(id);
  }
}

Header component

import { Component, OnInit } from '@angular/core';
@Component({
  selector: 'header',
  template: '<dashboard (setItemEvent)="setItem(param)"></dashboard>',
})
export class Header{   
  public setItem(id : any)
  {
    console.log('Exported value'+id)
  }
}

这篇关于调用函数从一个组件到另一个组件Angularjs 2的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！