如何在 child 函数参数中引用 parent 的参数？

Question

在Angular 6.0.7中，我有一个parentclasswj-flex-grid-parent.class.ts。它具有参数 public m_wjcGridXlsx = wjcGrid.xlsx; 我能够使用 this.m_wjcGridXlsx.

从我的 child 组件成功引用此参数

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

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

this.m_wjcGridXlsx 被智能感知突出显示并显示 找不到名称空间 'm_wjcGridXlsx'。如何在 arg 中引用此处的 m_wjcGridXlsx 参数？我试过预先附加 this. 和 self. 无济于事。

Parent分量：

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

...
}

Child分量：

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

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

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

Answer 2

在你的代码中

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

如何在 child 函数参数中引用 parent 的参数？

How to reference parent's parameter in child function argument?

javascript

parameters

typescript

angular

angular6