從一個組件調用函數到另一個組件Angularjs 2

我想將一個組件的值傳遞給另一個組件。從一個組件調用函數到另一個組件Angularjs 2

即，我需要從儀表板組件傳遞值標題組件

這裏是我的儀表板組件

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

但它總是給找不到setIte m

我在做什麼錯誤，我該如何解決這個問題？

注：我做這Angularjs 2

來源

2017-07-26 SA__

這是不是真的，以延長或使用零部件的合適方式。但是，一旦你導入類，它應該是如果它不是一個靜態類：（新標題）.setItem（id） – mygeea

你應該閱讀：https://angular.io/guide/component-interaction。你也可以使'setItem'方法成爲靜態的，並且像這樣調用它：'Header.setItem（id）'，但是當使用靜態方法時（如果你不知道靜態方法是什麼）時要小心。 – echonax

您可以使用：

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

其中名稱是您將使用訪問值的變量名。您可以通過訪問該值：

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

來源

2017-07-26 13:04:51

「**需要**使用」是一個非常強大的聲明... – Alex

我在這裏新:-( –

沒問題，只是想指出，但仍然，這不是真正的「實時」。這只是一次取得數據，對嗎？:) – Alex

您可以使用事件結合這樣的：

////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{ 
 
}

來源

2017-07-26 13:06:10

如果元素引發的事件，你可以聽他們與事件捆綁。有關深入的瞭解，請參閱角度文檔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) 
    } 
}

來源

2017-07-26 13:53:26 monica

從一個組件調用函數到另一個組件Angularjs 2

回答

相關問題