Question

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

即，我需要将值从Dashboard Component传递给Header Component

这是我的信息中心组件

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

但它总是给找不到setItem

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

注意：我在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{
}

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

3 个答案: