在 click 方法上从另一个组件调用 app.component.ts 上的方法 - 角度 6答案

【问题标题】：Call a method on app.component.ts from another component on click method - angular 6在 click 方法上从另一个组件调用 app.component.ts 上的方法 - 角度 6
【发布时间】：2019-11-25 13:35:53
【问题描述】：

我正在尝试在某个点击事件中从另一个组件调用 app.component.ts 中的方法

app.component.ts 有一个方法

getData(data){
  console.log(data)
}

另一个组件：点击事件试图调用getdata()

sendData(data){
  getData(data) // need to pass some data to that component
}

已尝试：在另一个组件中添加了 app.component 并且能够调用该方法但出现循环依赖错误。

【问题讨论】：

是另一个组件子 app,component 吗？
Angular 2 pass data between two components的可能重复
@AdritaSharma 不，这是不同的。我正在那里做一些操作，并想调用 app.component.ts 中的方法
@MaihanNijat：不，我不想做任何数据共享。只想从另一个调用 app.component.ts 中的方法

标签： angular

【解决方案1】：

您可以在构造函数中使用 @Inject 来使用 app.component 函数，如下所示：

constructor(@Inject(forwardRef(() => AppComponent)) private app_component:AppComponent) { 
}

sendData(data){
  this.app_component.getData(data) // need to pass some data to that component
}

从 @angular/core 导入 Inject 和 forwardRef

祝你好运！！！

【讨论】：

撇开您刚刚在组件之间引入依赖关系的事实。这里的主要警告是，这样做会使AppComponent 不可摇树。它将永远成为您捆绑包的一部分。使用与否。

【解决方案2】：

如果您需要从多个地方访问一个功能，那么您需要将该功能添加到服务中作为@提到的 DI 服务。

@Injectable()
export class <servicename>{

console(){}
getData(data){
  console.log(data)
}
}

接下来，确保服务列在主模块的 providers 数组中：

@NgModule({ 
  imports:      [ BrowserModule],
  declarations: [ AppComponent, BuyTestComponent ],
  providers:    [ <servicename> ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

现在您可以在应用内的任何地方访问服务功能

@Component(...)
export class componentname {

    //inject service into the component
    constructor(private service:servicename){}

    click() {
        //access service function
        this.service.getData();
    }
}

【讨论】：

【解决方案3】：

您可以创建一个服务并在那里创建 getData 函数，然后可以将其注入任何组件，如 app.compnent 和任何其他组件。从那里调用服务方法，这样你就可以使用

getData(data){
  console.log(data)
}

来自任何组件

看来您是在加载应用程序时从服务器加载数据，因此您已将其写入 app.component.ts

将其移动到服务中并将服务添加到 modules.ts 文件中并将其注入所需的组件中并使用 getData 函数

【讨论】：

【解决方案4】：

创建基类

如果操作是独立的，而您只想共享代码：

例子：

export class DataBaseClass {
   getData();
}

使用相同的 DataBaseClass 扩展两个类

export class AppComponent extends DataBaseClass {

// It will get from the base implementation the code.

}

创建共享服务

服务将是单例的，可以注入多个组件并共享数据

实现跨组件通信

将此解决方案用于亲子情况。

【讨论】：