使用在 angular 中的父级中作为配置 object 传递的服务调用子组件中的服务方法

Question

在这里，我以 object 的形式将表配置传递给子组件。 我也在哪里通过TableService

父组件.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;
  }


}

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

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

我希望这会奏效