如何在angular2中注入位置？

我認爲這將是相同的方式來注入位置就像我如何注入Http。但是，如果我在最後一行取消了「公共位置：位置」的註釋，我的應用就會中斷 - 頁面不會呈現。據我所看到的，我有正確的進口和供應商陣列：如何在angular2中注入位置？

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

不知道我錯過了什麼，或者當前版本已損壞。如果是第一種情況，我錯過了什麼？

來源

2015-12-30 Peter Pei Guo

你這樣做是正確的，這就是你如何注入[位置]（https：//開頭的角度。 IO /文檔/ TS /最新/ API /路由器/位置的class.html）。你在控制檯中看到任何錯誤嗎？ PS：從組件中刪除'ROUTER_PROVIDERS'，你已經在bootstrap中擁有它了。 –

我建議您完全刪除您的node_modules文件夾，並刪除package.json中與angular2相關的所有內容，然後重試再次安裝所有內容。 –

@EricMartinez，終於想出了環境問題。沒有編譯錯誤，但在運行時，在控制檯中，它抱怨說我沒有指定APP_BASE_HREF ...一旦我在bootstrap中添加「提供（APP_BASE_HREF，{useValue：'/'}）」，它就全部奏效了。然而根據文檔，只有當我使用PathLocationStrategy（這是默認值）時才需要，但我認爲我特別指定了HashLocationStrategy。 –

在NgModule

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

在組件

你需要注入這麼

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

constructor(
    @Inject('locationObject') private locationObject: Location 
) {}

來源

2017-03-29 12:29:21 ThomasP1988

如何在angular2中注入位置？

回答

相關問題