Question

我的html结构如下：

Comp1和Comp2所在的父组件：

现在在comp1我发现了一些元素如果发生了变化，那么我就会反映comp2中的值，但它们之间没有联系。

Comp1：

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

import { Comp2Component } from 'comp2.component';

@Component({
  selector: 'comp1',
  templateUrl: './comp1.html'
})
export class Comp1Component {

    sortBy(value)
    {
        this.FeedSortBy = value;
        this.SortByLabel = this.SortByLabelList[value];
        Comp2Component.filterActivities();
    }
}

器Comp2

import { Component } from '@angular/core';
    @Component({
      selector: 'comp2',
      templateUrl: './comp2.html'
    })
    export class Comp2Component {

     filterActivities()
     {
         //call this function on comp1 sort function call so it will update value of comp2
     }

  }

根据Rahul和Sajit的回答，我尝试使用EventEmitter并将我的结构更改为父子：

在我的父组件中，我使用：

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

import { FeedsComponent } from '../feeds/feeds.component';

@Component({
  selector: 'my-desk',
  styleUrls: ['../../assets/css/style.min.css'],
  templateUrl: './my-desk.component.html'
})
export class MyDeskComponent {

    @Output() FeedSortBy = new EventEmitter<string>();
    sortBy(value)
    {
        this.FeedSortBy.emit(value);
    }
}

在我的子组件中我使用：

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

import { DataService } from '../data.service';

declare var $: any;

@Component({
  selector: 'feeds',
  styleUrls: ['../../assets/css/style.min.css'],
  templateUrl: './feeds.component.html'
})
export class FeedsComponent {
    constructor(private dataService:DataService)
    {

    }
    @Input() FeedSortBy:number = 2;
}

子组件HTML：

{{FeedSortBy}}

但它总是输出2它没有改变我是否可以获得任何触发器以便知道值是否改变所以我在那里调用函数

Answer 1

您 cannot 这样做，有两种方法可以实现这一目标，

使用 angular service 在两个组件之间传递数据
使用 Event Emitters 在组件中传递值。

Answer 2

你可以从另一个组件调用另一个组件的方法，但是如果没有一些调整就不会更新调用组件的值 Event Emitters如果他们有父子关系或Shared Services或使用ngrx redux pattern

如何调用不同的组件方法就像

的Component1

  test(){
    console.log("Test");
  }

组件2

  working(){
    let component = new Component1();
    component.test();
  }

现在要更新组件2中的值，您可能必须使用上述任何一个。

对于事件发射器，请遵循此link

对于共享服务，请遵循此link

对于ngrx，请遵循此link

如何从不同的组件调用其他组件功能？

2 个答案: