Question

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

我创建了一个名为GridFactory的类，我正在使用它来扩展我的组件类，这使得它更加混乱，试图弄清楚如何在{{{{}}}中正确添加super调用1}}。到目前为止，我的班级看起来像这样。

constructor

到目前为止，我只是试图在我设置的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(); } }变量的错误

TS2304：找不到名称＆＃39; appSpecs＆＃39;。

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

更新

我将功能更改为此

appScpecs

我还决定制作一个包含所有内容的组件类，只是将它放在一个地方，直到我弄清楚如何让它工作。我没有收到任何错误，但结果显示在我的屏幕上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); }和控制台中的null。

Answer 1

尝试

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

    this.activteGrid( this.ScreenCore );
}

appSpecs是属性，而不是类型，因此将其用作参数类型是不正确的。无论如何，您应该能够在班级的任何功能中访问this.appSpecs。

如何使用@Self（）装饰器获得组件的大小？

1 个答案: