从一个组件调用函数到另一个组件 Angularjs 2

Question

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

即，我需要将值从仪表板组件传递到标题组件

这是我的仪表板组件

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

这是我的标头组件

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)
}
}

但它总是给找不到设置项

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

注意：我在 Angularjs 2 中执行此操作

Answer 1

如果元素引发事件，则可以使用事件绑定来侦听它们。请参阅角度文档 https://angular.io/guide/template-syntax#event-binding 以获取深入的知识。

仪表板组件

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

标头组件

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)
}
}

Answer 2

您可以使用：

localStorage.setItem('name', 'value');

其中 name 是将用于访问值的变量名称。您可以使用以下方法访问该值：

var x = localStorage.getItem('name');

Answer 3

你可以像这样使用事件绑定：

////First Component
@component({
selector:'componentA',
})
export class ComponentA{
yourMethod(yourPassedParameter:any){...}
}
////// Second Component
@component({
selector:'componentB',
template: `<button (click)="yourMethod(yourParameter)">click</button>`
)
export class ComponentB{
@Output() eventLis = new EventEmitter();
yourMethod(yourParameter:any){...
this.eventLis.emit(yourData);
}
}
////Your crosscomponent
@component({
selector:'crosscomponent',
template: `<componentA #componentA></componentA>
<componentB (eventLis)="componentA.yourMethod(yourParameter)"></componentB>`
)
export class crosscomponent{
}