Question

我尝试了解其他问题，但没有具体应用于我的问题的解决方案。

about.component.ts

import {
  Component,
  ViewChild,
  ElementRef,
  OnInit,
  Inject,
  ValueProvider 
  } from '@angular/core';

  /*const WINDOW_PROVIDER: ValueProvider = {
       provide: Window,
       useValue: window
     };*/

@Component({
  selector: 'app-about',
  templateUrl: './about.component.html',
  styleUrls: ['./about.component.css']
})

export class AboutComponent implements OnInit {

@ViewChild('cubeArea') cubeArea: ElementRef;

constructor (@Inject('window') public window: Window) {

    return this;

}

public ngOnInit (): void {

    let cube: HTMLElement = (
        <HTMLElement>
            this
                .cubeArea
                .nativeElement
    ),

        self: AboutComponent = this;

    this
        .window
        .addEventListener(
            'mousemove',
            (
                ev: MouseEvent
            ): void => {

                cube
                    .style
                    .transform = 'rotateX(-'.concat(
                        ev.pageY.toString(),
                        'deg) rotateY(',
                        ev.pageX.toString(),
                        'deg)'
                    );

            });

     }

 }

我知道我的错误发生在构造函数中，但我不确定如何纠正它。奇怪的是我在没有运行Angular QuickStart的问题的情况下工作但是我认为我缺少使用angular-cli的依赖关系这就是我的app.module.ts文件。

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule }   from '@angular/forms';
import { AngularFireModule } from 'angularfire2';
import { ReactiveFormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { RouterModule, Routes } from '@angular/router';

// Components

import { AppComponent } from './app.component';
import { ContactComponent } from './contact/contact.component';
import { PortfolioComponent } from './portfolio/portfolio.component';
import { HeaderComponent } from './header/header.component';
import { AboutComponent } from './about/about.component';

// Routes

import { routes } from './routers/app.router';


// Must export the config
export const firebaseConfig = {
apiKey: "stuff",
authDomain: "stuff",
databaseURL: "stuff",
storageBucket: "stuff"
};

@NgModule({
 imports: [
   BrowserModule,
   AngularFireModule.initializeApp(firebaseConfig),
   FormsModule,
   HttpModule,
   RouterModule,
   routes,
   FormsModule,
   ReactiveFormsModule
 ],
 declarations: [ 
   AppComponent,
   ContactComponent,
   PortfolioComponent,
   HeaderComponent,
   AboutComponent
 ],

'providers': [{

   'provide': Window,

   'useValue': window

 }],

 bootstrap: [ AppComponent ]
})
export class AppModule {}

您可以从https://github.com/ICEDBANK/Portfolio克隆此存储库将保持公开状态如果您想了解如何将Firebase实施到项目中的良好源代码。

Answer 1

我认为您没有导入window

尝试包括：

import {
  Component,
  ViewChild,
  ElementRef,
  OnInit,
  ValueProvider 
  } from '@angular/core';

const WINDOW_PROVIDER: ValueProvider = {
    provide: Window,
    useValue: window
};

位于脚本顶部或app.module.ts

修改

我认为您在此处缺少的是组件中@Inject的明确声明。所以试试：

constructor (@Inject('Window') window: Window) {...}

构造函数参数抛出“无法解析所有参数”错误

1 个答案: