0

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

我创建了一个名为的类GridFactory，我用它来扩展我的组件类，这使得试图弄清楚如何super在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(); }
}

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

TS2304：找不到名称“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);
}

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

4

1 回答 1

1

尝试

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

    this.activteGrid( this.ScreenCore );
}

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

于 2017-11-17T04:25:47.090 回答