2016-12-16 147 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){...}' –