使用作为配置对象传递的服务在子组件中调用服务方法答案

【问题标题】：Invoke service methods in child component using a service passed as config object in parent in angular使用作为配置对象传递的服务在子组件中调用服务方法
【发布时间】：2022-08-18 15:52:41
【问题描述】：

这里我将表格配置以对象的形式传递给子组件。我经过的地方餐桌服务还

父组件.html

<app-shared-table [tableConfiguration]=\"tableConfig\"></app-shared-table>

父组件.ts

import {Component, OnInit} from \'@angular/core\';
import { TableService } from \'src/app/services/table.service\';

@Component({
  selector: \'app-parent\',
  templateUrl: \'./parent.component.html\',
  styleUrls: [\'./parent.component.scss\'],
  providers: [TableService]
})
export class ParentComponent implements OnInit {
  constructor( private tableService: TableService) {
  }
  public tableConfig = {
    dataService: this.tableService,
    defaultSorting: [],
    headline: \"Tanslation Service\",
    filterSupport: true,
  }
  ngOnInit(): void {

  }
}

我正在调用共享表组件中 TableService 中定义的服务来获取配置。我无法访问服务方法的地方。显示未定义。

shared-table.component.ts

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

@Component({
  selector: \'app-shared-table\',
  templateUrl: \'./shared-table.component.html\',
  styleUrls: [\'./shared-table.component.scss\']
})
export class SharedTableComponent implements OnInit {
  @Input() tableConfiguration : any = {};
  public defaultConfig = {
    currentSearch: null,
    currentSorting: [],
    offset: 0,
    length: 50,
    data: [],
    columnDefinition: []
  }

  public config = {...this.defaultConfig, ...this.tableConfiguration};

  constructor() { }

  ngOnInit(): void {
    this.config.columnDefinition = this.config.dataService.ColumnDefinition;
     this.config.dataService.loadData().subscribe((data:any) => {
       this.config.data = data
       console.log(\"35\",this.config.data)
     })
  }
}

表服务.ts

import { Injectable } from \'@angular/core\';
import { Observable, of, Subject } from \'rxjs\';
import { HttpClient } from \'@angular/common/http\';
import { environment } from \'src/environments/environment\';

export interface translateTable {
  id: string
  name: string
  meaning: string
  type: Type
  textInLocales: TextInLocale[]
}
export interface Type {
  id: number
  name: string
}

export interface TextInLocale {
  id: number
  text: string
  description: string
}
@Injectable({
  providedIn: \'root\'
})
export class TableService {
  columnCellDefinition = [
    {
      FieldName: \'id\',
      FieldLabel: \'id\',
      type: \"string\",
      sortable: true,
      visible: true
    },
    {
      FieldName: \'Name\',
      FieldLabel: \'Name\',
      type: \"string\",
      sortable: true,
      visible: true
    },
    {
      FieldName: \'meaning\',
      FieldLabel: \'meaning\',
      type: \"string\",
      sortable: true,
      visible: true
    },
    {
      FieldName: \'type\',
      FieldLabel: \'type\',
      type: \"string\",
      sortable: true,
      visible: true
    },

  ];
  constructor(private httpClient: HttpClient) { }
  loadData = (): Observable<translateTable> => {
    const url = `${(environment as any).url}${(environment as any).findTexts}?code=${(environment as any).APIKey}`
    return this.httpClient.get<translateTable>(url, { headers: { \'API-Key\': environment.APIKey } });
  }

  loadColumnDefinition = () => {
    return this.columnCellDefinition;
  }


}

从父组件发送输入时如何访问子组件中的服务方法

dataService.ColumnDefinition 在您提供的代码中不存在，所以就是这样。我想你的意思是写dataService.columnCellDefinition。你应该定义一个正确的类型而不是使用any，你不会犯这样的错误。如果您计划允许多个服务，您应该创建一个由这些服务实现的接口，然后您可以将属性声明为该类型。

标签： angular angular-services angular-components angular14

【解决方案1】：

父组件.ts

import {Component, OnInit} from '@angular/core';
import { TableService } from 'src/app/services/table.service';

@Component({
  selector: 'app-parent',
  templateUrl: './parent.component.html',
  styleUrls: ['./parent.component.scss'],
  providers: [TableService]
})
export class ParentComponent implements OnInit {
  constructor( private tableService: TableService) {
  }
  public tableConfig: any;
  ngOnInit(): void {
    this.tableConfig = {
    dataService: this.tableService,
    defaultSorting: [],
    headline: "Tanslation Service",
    filterSupport: true,
   }
  }
}

在里面分配配置ngOnInit()并且以下分配对于服务文件也不正确。

this.config.columnDefinition = this.config.dataService.ColumnDefinition;

shared-table.component.ts

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

@Component({
  selector: 'app-shared-table',
  templateUrl: './shared-table.component.html',
  styleUrls: ['./shared-table.component.scss']
})
export class SharedTableComponent implements OnInit {
  @Input() tableConfiguration : any = {};
  public defaultConfig = {
    currentSearch: null,
    currentSorting: [],
    offset: 0,
    length: 50,
    data: [],
    columnDefinition: []
  }

  public config: any;

  constructor() { }

  ngOnInit(): void {
    this.config = {...this.defaultConfig, ...this.tableConfiguration};
    this.config.columnDefinition = this.config.dataService.columnCellDefinition;
     this.config.dataService.loadData().subscribe((data:any) => {
       this.config.data = data
       console.log("35",this.config.data)
     })
  }
}

我希望这会奏效

【讨论】：

【解决方案2】：

您的所作所为令人困惑，因为为什么不像这样在子组件的构造函数中导入tableService！

export class SharedTableComponent implements OnInit {
  constructor( private tableService: TableService) {

其次为了让子服务变量可以访问父服务变量（不推荐），可以在ngOnInit方法上设置变量tableConfig的值！

import {Component, OnInit} from '@angular/core';
import { TableService } from 'src/app/services/table.service';

@Component({
  selector: 'app-parent',
  templateUrl: './parent.component.html',
  styleUrls: ['./parent.component.scss'],
  providers: [TableService]
})
export class ParentComponent implements OnInit {
  constructor( private tableService: TableService) {
  }
  public tableConfig;

  ngOnInit(): void {
    this.tableConfig = {
    dataService: this.tableService,
    defaultSorting: [],
    headline: "Tanslation Service",
    filterSupport: true,
  }
  }
}

【讨论】：