从一个组件调用函数到另一个组件Angularjs 2 [重复]答案

【问题标题】：Call function from one component to another component Angularjs 2 [duplicate]从一个组件调用函数到另一个组件Angularjs 2 [重复]
【发布时间】：2018-01-01 19:41:59
【问题描述】：

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

也就是说，我需要将值从仪表板组件传递给标题组件

这是我的仪表板组件

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

这是我的 Header 组件

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

但是总是给找不到setItem

我做错了什么，我该如何解决？

注意：我在 Angularjs 2 中这样做

【问题讨论】：

这并不是扩展或使用组件的真正合适方式。但是一旦你导入了这个类，它应该就像它不是一个静态类：(new Header).setItem(id)
您应该阅读：angular.io/guide/component-interaction。您也可以将 setItem 方法设为静态并将其命名为：Header.setItem(id) 但在使用静态方法时要小心（如果您不知道静态的含义/作用）。

标签： javascript angular components

【解决方案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)
  }
}

【讨论】：

在上面的例子中，我们继承了仪表板模板：''。如果我不想继承仪表板模板并想调用仪表板功能。有可能吗？

【解决方案2】：

你可以使用：

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

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

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

【讨论】：

“需要使用”是一个非常有力的声明......
我是新来的 :-(
没问题，只是想指出这一点。但是，这并不是真正“实时”工作的。这最初只获取一次数据，对吗？ :)
否，它将数据设置为变量“名称”。我正在使用 localstorage 在登录组件中设置值（如令牌、用户名、电话等），然后在需要时在多个组件中获取它。
是的，但这一切都取决于。根据您的回答，我们必须假设这里没有儿童父母互动，那么这个答案有效:)

【解决方案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{
}

【讨论】：