2015-12-30 8 views
6

Myślałem, że to będzie ten sam sposób, aby wstrzyknąć Lokalizacja, podobnie jak wstrzyknięcie Http. Jednak moja aplikacja zrywa - strona nie wyświetla się, jeśli odkomentuję "publiczna lokalizacja: lokalizacja" w ostatnim wierszu. O ile widzę, mam właściwą tablicę import i dostawców:Jak mogę wstrzyknąć Lokalizacja w kątowym2?

import {Component} from 'angular2/core'; 
import { 
    ROUTER_DIRECTIVES, 
    ROUTER_PROVIDERS, 
    RouteConfig, 
    Location, 
    LocationStrategy, 
    HashLocationStrategy 
} from 'angular2/router'; 

import {TaskForm} from './task_form'; 
import {TaskList} from './task_list'; 
import {AboutUs} from './about_us'; 

@Component({ 
    selector: 'task-app', 
    templateUrl: 'app/task_app.html', 
    providers: [ROUTER_PROVIDERS], 
    directives: [TaskForm, TaskList, ROUTER_DIRECTIVES] 
}) 
@RouteConfig([ 
    {path: '/', component: TaskApp, as: 'Home'}, 
    {path: '/about_us', component: AboutUs, as: 'aboutUs'} 
]) 
export class TaskApp { 
    constructor(/*public location: Location*/) { 

W moim index.html, mam następujący wiersz:

<script src="https://code.angularjs.org/2.0.0-beta.0/router.dev.js"></script> 

W moim kod bootstrap, mam:

import {bootstrap} from 'angular2/platform/browser'; 
import {HTTP_PROVIDERS} from 'angular2/http'; 
import {provide} from 'angular2/core'; 

import { 
    ROUTER_DIRECTIVES, 
    ROUTER_PROVIDERS, 
    RouteConfig, 
    Location, 
    LocationStrategy, 
    HashLocationStrategy 
} from 'angular2/router'; 

import {TaskApp} from './task_app'; 
import {MyService} from './my_service' 

bootstrap(TaskApp, [HTTP_PROVIDERS, ROUTER_PROVIDERS, MyService, provide(LocationStrategy, {useClass: HashLocationStrategy})]); 

Nie jestem pewien, czy coś przeoczyłem, czy aktualna kompilacja jest zepsuta. Jeśli to pierwszy przypadek, to za czym tęskniłem?

+0

Robisz to w prawo, to w jaki sposób wstrzyknąć [LOKALIZACJA] (https: // kątowych. io/docs/ts/latest/api/router/Location-class.html). Czy widzisz jakiś błąd w konsoli? PS: Usuń "ROUTER_PROVIDERS" z komponentu, już masz go w bootstrapie. –

+0

Polecam, aby całkowicie usunąć folder node_modules i usunąć wszystko, co związane z angular2 w package.json, a następnie spróbuj ponownie zainstalować wszystko. –

+0

@EricMartinez, w końcu zorientował się, że problemy środowiska. Nie wystąpił błąd kompilacji, ale w czasie działania w konsoli skarżył się, że nie określiłem APP_BASE_HREF ... po dodaniu "provide (APP_BASE_HREF, {useValue: '/'})" w bootstrapie, wszystko działało. Jednak zgodnie z dokumentem jest to wymagane tylko wtedy, gdy użyłem PathLocationStrategy (, która jest domyślna), ale myślałem, że szczególnie podałem HashLocationStrategy. –

Odpowiedz

1

w NgModule

providers: [ 
    { provide: 'locationObject', useValue: location} 
    ] 

w składniku trzeba wstrzyknąć go tak

import { Component, Inject } from '@angular/core'; 

constructor(
    @Inject('locationObject') private locationObject: Location 
) {} 
Powiązane problemy