使用在 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)
     })
  }
}

我希望這會奏效