Question

如何在不路由的情况下监控和设置URL搜索参数？

＆＃39;位置＆＃39;似乎有我想要的东西。但是我收到了这个错误：

错误：没有位置提供商！

以下内容：

import { Component } from '@angular/core';
import { Location, HashLocationStrategy } from "@angular/common";

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.css'],
  providers: [HashLocationStrategy]
})

export class AppComponent {
  constructor(private location: Location){}
}

我如何知道它想要哪个提供商？有没有更好的方法来实现这一目标？

Answer 1

我曾经做过一次。要实施HashLocationStrategy，您必须像 MainComponent中那样实现它：

import {bootstrap}    from '@angular/platform-browser-dynamic';
import {
    Location,
    LocationStrategy,
    HashLocationStrategy,
    APP_BASE_HREF
} from '@angular/common';
import {provide} from '@angular/core';
import {ROUTER_PROVIDERS} from '@angular/router-deprecated'

import { HTTP_PROVIDERS } from '@angular/http';
import {AppComponent} from './app.component';

bootstrap(
    AppComponent
    , [
        HTTP_PROVIDERS
        ,ROUTER_PROVIDERS
        , provide(APP_BASE_HREF, { useValue: '/' })     
        , provide(LocationStrategy, { useClass: HashLocationStrategy })]
);

Answer 2

相当老的问题，尽管人们仍在访问，但仍很活跃。根据Angular文档：

最好使用路由器服务来触发路由更改。仅当您需要在路由之外与之交互或创建标准化URL时，才使用“位置”。

@Nathaniel的回复有点过时了。

使用位置（无路由器）

这是更新的实现：

import { Location, LocationStrategy, HashLocationStrategy } from '@angular/common';
import { Component } from '@angular/core';

@Component({
   selector: 'path-location',
   providers: [Location, {provide: LocationStrategy, useClass: HashLocationStrategy}],
   template: `
      Current URL is: <code>{{location.path()}}</code><br>
      Normalize: <code>/foo/bar/</code> is: <code>{{location.normalize('foo/bar')}}</code><br>
   `
})
export class LocationComponent {

   location: Location;

   constructor(location: Location) { this.location = location; }
}

根据使用情况，可以使用三个LocationStrategy：

HashLocationStrategy-处理浏览器URL的哈希片段
PathLocationStrategy-处理浏览器URL的路径
MockLocationStrategy-用于测试/模拟

使用路由器

Angular Router也提供了一种简单的方法。您唯一需要做的就是将RouterModule导入到AppModule中，如下所示：

@NgModule({
  imports: [
     RouterModule.forRoot([])],
})
export class AppModule {}

，然后使用ActivatedRoute获取搜索参数。

import { ActivatedRoute } from '@angular/router';
import 'rxjs/add/operator/first';     // optional if you're a fan of rxjs

@Component({
    selector: 'ngx-overview',
    templateUrl: './overview.component.html',
    styleUrls: ['./overview.component.scss'],
})
export class MyComponent {

   constructor(private route: ActivatedRoute) {
       this.route.params.first().subscribe(params => {
           if (params._query) {
               // Pass parameters: http://your.app.com?_query=myquery
               // Use _query and/or any other parameters you need here
           }
       });
   }
}

希望有帮助

Angular2-没有路由的位置？

2 个答案: