angular - 如何在 angular2 中注入(inject) Location?

标签 angular angular2-routing

我认为注入(inject) Location 的方式与我注入(inject) Http 的方式相同。但是我的应用程序中断了——如果我在最后一行取消注释“公共(public)位置:位置”,则页面不会呈现。据我所知,我有正确的导入和提供程序数组:

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>

在我的 Bootstrap 代码中,我有:

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

不确定是我遗漏了什么还是当前构建已损坏。如果是第一种情况,我错过了什么?

最佳答案

在你的 NgModule 中

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

在你的组件中你需要注入(inject)它

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

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

关于angular - 如何在 angular2 中注入(inject) Location?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34538598/

相关文章:

javascript - angular6中选定行中的事件下拉列表

javascript - 从 Promise 返回数据并在另一个方法中获取它

javascript - 类型错误 : map is not a function

Angular/RxJS 6 - 如何对 next() 触发的指令抛出异常进行单元测试

Angular 4 延迟加载和路由不起作用

Angular 类型错误 : is not a function when trying to call an object. 对象 []. 方法

angular - 在模块延迟加载时显示加载动画?

javascript - 在 Angular 2 中订阅 ActivatedRoute 参数不会更新 View 模板

angular - 如何检测用户在 Angular2 中导航回来?

angular - 如何通过重写已部署应用程序中的 URL 使 Angular 2 路由器工作?