2016-12-16 150 views
0

我试图查看其他问题,但没有将这些解决方案专门应用于我的问题。构造函数抛出“无法解析所有参数”错误的参数

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克隆该库如果你想就如何落实到火力地堡的包括你的项目好源代码的想法会为一点保持公开。

回答

0

我想你是不是导入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) {...} 
+0

不幸的是,上面的代码并没有纠正它。 = {在app.module.ts' '提供商':[{ '提供':窗口, 'useValue':窗口 }],'应该给我访问窗口。 –

+0

为了工作,你必须从某个地方最初导入'Window' –

+0

尝试使用构造函数作为构造函数(@Inject('Window')window:Window){...}' –