如何在子函数参数中引用父参数？

Question

在Angular 6.0.7，我有一个父类wj-flex-grid-parent.class.ts。它有参数public m_wjcGridXlsx = wjcGrid.xlsx; 我可以使用this.m_wjcGridXlsx 成功地从我的子组件中引用这个参数。

子组件中的一个函数在尝试在其参数中引用 m_wjcGridXlsx 时仍然给我带来问题：

public _exportFormatItem(args: m_wjcGridXlsx.XlsxFormatItemEventArgs) {
...
}

this.m_wjcGridXlsx 被 intellisense 高亮显示找不到命名空间“m_wjcGridXlsx”。如何在arg 中引用m_wjcGridXlsx 参数？我试过预先附加 this. 和 self. 无济于事。

父组件：

import { OnInit, ViewChild, AfterViewInit } from '@angular/core';
import * as wjcGridXlsx from 'wijmo/wijmo.grid.xlsx';
   
export class WjFlexGridParent implements OnInit
{    
    
    public m_wjcGridXlsx = wjcGridXlsx;    // the parameter giving me problems

...
}

子组件：

import { Component, OnInit, Input, Output, OnChanges, SimpleChanges, ViewChild, EventEmitter, HostListener } from '@angular/core';
import { WjFlexGridParent } from '../fw/wijmo/wj-flex-grid-parent.class';

@Component({
    selector: '...',
    templateUrl: '...',
    styleUrls: ['...']
  })

  export class ChildComponent extends WjFlexGridParent implements OnChanges, OnInit {

    randomFunction() {  
     // this works, m_wjcGridXlsx is recognized:
     this.m_wjcGridXlsx.FlexGridXlsxConverter.saveAsync(this.m_grid, { includeColumnHeaders: true, includeCellStyles: false, formatItem: null }, strFileName);
    }


    // this doesn't work, m_wjcGridXlsx is not recognized:
    public _exportFormatItem(args: m_wjcGridXlsx.XlsxFormatItemEventArgs) { 
       ...
    }

  }
    

Answer 1

在你的代码中

import {
  Component, OnInit, Input, Output, OnChanges, SimpleChanges, ViewChild,
  EventEmitter, HostListener
} from '@angular/core';
import { WjFlexGridParent } from '../fw/wijmo/wj-flex-grid-parent.class';

@Component({
    selector: '...',
    templateUrl: '...',
    styleUrls: ['...']
})
export class ChildComponent extends WjFlexGridParent implements OnChanges, OnInit {
  _exportFormatItem(args: m_wjcGridXlsx.XlsxFormatItemEventArgs) {}
}

您正在使用未声明的标识符m_wjcGridXlsx。范围内根本没有任何名称为m_wjcGridXlsx。您确实从WjFlexGridParent 继承了一个名为m_wjcGridXlsx 的属性，但是与任何属性一样，您必须符合条件，在这种情况下为this 或super。

但是，如果我们写

_exportFormatItem(args: this.m_wjcGridXlsx.XlsxFormatItemEventArgs) {}

this.m_wjcGridXlsx 是在需要命名空间的地方使用的值。

简单且惯用的解决方案是导入类型并使用它。

import {XlsxFormatItemEventArgs} from 'wijmo/wijmo.grid.xlsx';

export class ChildComponent {
  _exportFormatItem(args: XlsxFormatItemEventArgs) {}
}

这与继承以及类和属性完全无关。它只是从模块中导入一个类型，因此我们可以使用它来注释一个值，在本例中为参数args。

如果您愿意，可以使用模块命名空间导入并引用由您在导入语句中创建的命名空间别名限定的类型。

import * as wijmo from 'wijmo/wijmo.grid.xlsx';

export class ChildComponent {
  _exportFormatItem(args: wijmo.XlsxFormatItemEventArgs) {}
}

Answer 2

您正在尝试将父类实例上的值用作类型。 您要么需要将属性设为静态并使用 typeof 来获取类型，要么将类型本身导入到子类中。

请注意，参数值可能是从父类传递的，但类型信息不需要通过父类来。