如何使用 @Self() 装饰器导出组件的大小？

Question

我正在研究一种计算和设置 CSS 网格布局的机制。这样做的一部分要求我的组件能够检测它们自己的像素大小。到目前为止，我遇到了 @Self() 装饰器，但现在我实际上正要使用它，我无法弄清楚如何从中获取有关组件的任何信息。

我制作了一个名为 GridFactory 的 class，我用它来扩展我的组件 classes，这让我在试图弄清楚如何添加 super在constructor中正确调用。到目前为止，我的 class 看起来像这样。

export class GridFactory {
    ScreenCore   : ScrnCore = new ScrnCore();
    GridSettings : GridSpecs = new GridSpecs();

    @HostListener('window:resize', ['$event']) onResize(event){ this.checkScrn(); }

    constructor( @Self() public appSpecs: ElementRef ){
        this.checkScrn();
    }

    checkScrn( specs: appSpecs ){
        this.ScreenCore.Width   = specs.width;
        this.ScreenCore.Height  = specs.height;

        this.activteGrid( this.ScreenCore );
    }

    activteGrid( data: ScrnCore ){ this.GridSettings = gridManager( data.Width ); }
}

到目前为止，我只是想在我这样设置的 app.component 上调用它

@Component({
  selector    : 'app',
  templateUrl : './app.component.html'
})

export class AppComponent extends GridFactory implements OnInit {
    MainFrame: SiteFrame;

    @HostListener('window:resize', ['$event']) onResize(event){ this.calcScreen(); }

    constructor(public appSpecs: ElementRef){
        super(appSpecs);
    }

    ngOnInit(){ this.calcScreen(); }

    calcScreen(){ this.MainFrame = uiMonitor(); }
}

截至目前，我收到关于 appScpecs 变量的错误

TS2304: Cannot find name 'appSpecs'.

我一直在查找我能想到的所有内容以查找有关此装饰器的更多信息，但我还没有找到任何信息。谁能帮我解决这个问题？

更新

我把函数改成了这个

checkScrn(){
    this.ScreenCore.Width   = this.appSpecs.nativeElement.width;
    this.ScreenCore.Height  = this.appSpecs.nativeElement.height;

    this.activteGrid( this.ScreenCore );
    console.log(this.appSpecs.nativeElement.width);
}

我还决定制作一个包含所有内容的组件 class 只是为了将它们全部放在一个地方，直到我弄清楚如何让它工作。我没有收到任何错误，但结果在我的屏幕上显示 null，在控制台中显示 undefined。

Answer 1

尝试

checkScrn(){
    this.ScreenCore.Width   = this.appSpecs.width;
    this.ScreenCore.Height  = this.appSpecs.height;

    this.activteGrid( this.ScreenCore );
}

appSpecs是一个属性，不是类型，所以用它作为参数类型是不正确的。无论如何，您应该能够在 class 的任何函数中访问 this.appSpecs。

如何使用 @Self() 装饰器导出组件的大小？

How do you derive a component's size using @Self() decorator?

angular

ecmascript-6

typescript2.2