如何访问另一个组件中一个组件的变量[Angular] [英] How to access variables of one component in another component [Angular]

问题描述

我是Angular的新手.我今天正在尝试一件简单的事情.我经历了很多答案，但无法正确实现它们.我想访问 filter-bar (我的两个自定义组件)中的 filter-panel 的一些变量.但是两者都不是亲子.它们是独立的，尽管在同一目录中.在这里，我创建了一个 stackblitz .这是我的代码:

I'm new to Angular. I'm trying a simple thing today. I've gone through many answers but not able implement them correctly. I want to access some variables of filter-panel in filter-bar, (my two custom components). But none of the two is parent-child to each other. They're independent, though within the same directory. Here I've created a stackblitz. And here's my code:

filter-panel.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
    ...
})
export class FilterPanelComponent implements OnInit {

public activeFilters: string[];
public text: string="hello world";

constructor() {
    this.activeFilters = [
        'Apple',
        'Grapes',
        'Bana'
    ];
}

ngOnInit() {}

}

filter-bar.component.ts

import { Component, OnInit, ViewChild } from '@angular/core';
import { FilterPanelComponent } from './filter-panel/filter-panel.component';

@Component({
    ...
})
export class FilterBarComponent implements OnInit {

    @ViewChild('FilterPanelComponent', {static : false}) filterPanel: FilterPanelComponent;

    public values1: string[] = ['Philips'];

    public values2: string[];

    constructor() {
      //this.values2=this.filterPanel.activeFilters;  
    }

    ngOnInit() {
        //console.log(this.values2);
    }
}

进行更多研究后，我意识到在这种情况下使用 @ViewChild 是没有意义的.因此，我尝试提供服务.我尝试了 @Input().我还尝试了以下方法:如何使用来自Angular2中另一个组件中组件的变量.但我仍然无法实施该解决方案.请纠正我.

After doing some more research I realized it's pointless to use @ViewChild in this scenario. So I tried making a service. I tried @Input(). I also tried this: How to use a variable from a component in another in Angular2. but I'm still not able to implement the solution. Please correct me.

推荐答案

您可以创建服务以在组件之间共享数据，

You can create a service to share the data between components,

名为 filter-panel.service.ts 的新服务文件，其中包含

A new service called, filter-panel.service.ts file with setter() and getter() method,

import { Injectable } from '@angular/core';

@Injectable()
export class FilterPanelService {

  filterdata: any[];
  constructor() { }

   get data(): any{
    return this.filterdata;
  }

  set data(val: any){
    this.filterdata = val;
    console.log(this.filterdata);
  }

}

在 filter-panel.component.ts 中将值设置为

export class FilterPanelComponent implements OnInit {

    public activeFilters: string[];
    public text: string="hello world";

    constructor(public filterPanelService:FilterPanelService) {

        this.activeFilters = [
            'Provider: CMS',
            'Region: All',
            'Provider Group:All',
            'Provider: CMS',
            'Region: All',
            'Provider Group: All'
        ];

        this.filterPanelService.data = this.activeFilters;
    }

    ngOnInit() {}
}

然后在 filter-bar.component.ts 中获得类似的值，

And in filter-bar.component.ts get the value like,

export class FilterBarComponent implements OnInit {
    @ViewChild('FilterPanelComponent', {static : false}) filterPanel: FilterPanelComponent;


    public values1: string[] = ['Philips'];

    public values2: string[];


    constructor(public filterPanelService: FilterPanelService) {

      //this.values2=this.filterPanel.activeFilters;  
    }

    ngOnInit() {
        //console.log(this.values2);
        console.log('value received ', this.filterPanelService.data);
    }
}

正在工作的Stackblitz ..

这篇关于如何访问另一个组件中一个组件的变量[Angular]的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！