2015-12-30 5 views
6

Я думал, что это будет тот же самый способ, чтобы ввести местоположение так же, как я ввожу Http. Однако мое приложение разбивается - страница не отображается, если я раскомментирую «общедоступное местоположение: местоположение» в последней строке. Насколько я понимаю, у меня есть правильный импорт и поставщики массив:Как я могу ввести местоположение в угловое2?

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*/) { 

В моей index.html, у меня есть следующие строки:

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

В моей начальной загрузке коде, у меня есть:

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})]); 

Не уверен, что я что-то пропустил, или текущая сборка нарушена. Если это первый случай, что я пропустил?

+0

Вы делаете это правильно, вот как вы инъекционные [Адрес] (https: // угловатые. -й/Docs/ц/последний/API/маршрутизатор/Location-class.html). Вы видите какую-либо ошибку в консоли? PS: Удалить «ROUTER_PROVIDERS» из компонента, у вас уже есть его в начальной загрузке. –

+0

Я рекомендую вам полностью удалить вашу папку node_modules и удалить все, что связано с угловым2 в package.json, а затем повторить попытку установить все снова. –

+0

@ EricMartinez, наконец, выяснил проблемы с окружающей средой. Ошибка компиляции не была, но во время выполнения на консоли она жаловалась, что я не указывал APP_BASE_HREF ... как только я добавил «предоставить (APP_BASE_HREF, {useValue: '/'})» в bootstrap, все это сработало. Однако в соответствии с документом это требуется только в том случае, если я использовал PathLocationStrategy (по умолчанию), но я думал, что я конкретно указал HashLocationStrategy. –

ответ

1

в вашем NgModule

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

в компоненте необходимо Вводят его так

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

constructor(
    @Inject('locationObject') private locationObject: Location 
) {} 
Смежные вопросы