Angular 带选项参数的路由，带？及；

我正试图深入研究angular的路线，但没有成功。我要做的是使用angular的路由捕捉url中的每个参数

让我们以这个url为例：

http://localhost:4200/PUC/#/P3?MODE=P&USER=AE13356&PROJECT=00001&PROTOCOL=00002&VERSION=1

我正在尝试将参数分配给一些变量

因此，我所做的（错误）是：

路线：

 RouterModule.forRoot(
      [
        { path: "", component: AppComponent, pathMatch: 'full'},
      ],
    )

组成部分：

@Component({
  selector: 'app-main',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit{

  constructor(
    private router: Router,
    private route: ActivatedRoute
  ) { }

  ngOnInit(){
    let queryParams = this.route.snapshot.queryParams;
    const mode = queryParams['MODE'];

    console.log("ID > " + mode);
  }
}

但是

queryParams

始终是一个空对象。我错过了什么

编辑

---

使用

location.href

我已经得到了整个url，我可以用这种方式对我得到的数据进行一些逻辑处理吗？基本上，如果

PROJECT

有值，我必须加载一个组件，如果

PROJECT

不在url中，则加载另一个组件。

快照不会在更改时提供更新的查询参数。但是在

ActivatedRoute

上有一个

queryParams

BehaviorSubject

，它提供了更新的查询参数

为此，您应该使用

route.queryParams.subscribe

现在，我不知道如何处理URL中的

。但如果没有这一点，因为您将PUC作为路由，P3作为它的子级，因此您的路由配置将如下所示：

RouterModule.forRoot([
  {
    path: 'PUC/:segment',
    component: PucComponent
  }
])

至于route

PIC

，我们正在加载

PucComponent

，您应该在那里阅读

queryParams

import { Component, OnInit } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-puc',
  templateUrl: './puc.component.html',
  styleUrls: ['./puc.component.css']
})
export class PucComponent implements OnInit {

  constructor(
    private router: Router,
    private route: ActivatedRoute
  ) { }

  ngOnInit(){
    this.route.queryParams
      .subscribe(queryParams => console.log(queryParams));
  }

}

---

这里有一个示例供参考。

快照不会在查询参数发生更改时提供更新的查询参数。但是在

ActivatedRoute

上有一个

queryParams

BehaviorSubject

，它提供了更新的查询参数

为此，您应该使用

route.queryParams.subscribe

现在，我不知道如何处理URL中的

。但如果没有这一点，因为您将PUC作为路由，P3作为它的子级，因此您的路由配置将如下所示：

RouterModule.forRoot([
  {
    path: 'PUC/:segment',
    component: PucComponent
  }
])

至于route

PIC

，我们正在加载

PucComponent

，您应该在那里阅读

queryParams

import { Component, OnInit } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-puc',
  templateUrl: './puc.component.html',
  styleUrls: ['./puc.component.css']
})
export class PucComponent implements OnInit {

  constructor(
    private router: Router,
    private route: ActivatedRoute
  ) { }

  ngOnInit(){
    this.route.queryParams
      .subscribe(queryParams => console.log(queryParams));
  }

}

---

这里有一个供参考的链接。

通过订阅阅读

import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-user-detail',
  templateUrl: 'user-detail.component.html'
})
export class UserDetailComponent implements OnInit {
    constructor(private activeRoute: ActivatedRoute) {
    }

ngOnInit() {
    this.activeRoute.queryParams.subscribe(queryParams => {
        // do something with the query params
    });

    this.activeRoute.params.subscribe(routeParams => {
        this.loadUserDetail(routeParams.id);
    });
}

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { RouterModule,Routes } from '@angular/router';
import { HelloComponent } from './hello.component';
import { AppComponent } from './app.component';

const routes:Routes = [{
       path:'PUC/P3', component:HelloComponent
    }]
@NgModule({
  imports:[ BrowserModule,FormsModule ,RouterModule.forRoot(routes,{useHash:true})],
  declarations: [ AppComponent, HelloComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-hello',
  template: `<h2>Check Console for Output</h2>`,
})
export class HelloComponent implements OnInit {
  constructor(private route:ActivatedRoute){}
  ngOnInit(){
    this.route.queryParams.subscribe((query)=>{
      console.log(query);
      console.log("MODE",query['MODE']);//output MODE:p
    });
  }
}

肮脏的道路

通过按如下方式嵌套订阅服务器：

ngOnInit() {
    // Nest them together and
    this.activeRoute.queryParams.subscribe(queryParams => {
        this.activeRoute.params.subscribe(routeParams => {
            this.loadUserDetail(routeParams.id, queryParams.type);
        });
    });
}

或者，您可能会尝试编写一个不同的版本，即将这些嵌套回调移到一个helper函数，然后将另一个接受查询和路由参数的回调传递给它，即

ngOnInit() {
    this.readUrlParams((routeParams, queryParams) => {
        this.loadUserDetail(routeParams.id, queryParams.type);
    });
}

readUrlParams(callback) {
    // Nest them together and
    this.activeRoute.queryParams.subscribe(queryParams => {
        this.activeRoute.params.subscribe(routeParams => {
            callback(routeParams, queryParams);
        });
    });
}

使用RxJS

RxJS是一个非常强大的库，您可以用几种不同的方法来实现它，但是我喜欢并发现自己使用最多的方法是使用CombineTest操作符，通过它我们合并路由和查询参数，并在一个对象中使用一个可观察到的对象。下面是我们更新后的示例的样子

import { ActivatedRoute } from '@angular/router';

// Add the observable and combineLatest
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/combineLatest';

@Component({
  selector: 'app-user-detail',
  templateUrl: 'user-detail.component.html'
})
export class UserDetailComponent implements OnInit {
    constructor(private activeRoute: ActivatedRoute) {
    }

    ngOnInit() {
        // Combine them both into a single observable
        const urlParams = Observable.combineLatest(
          this.activatedRoute.params,
          this.activatedRoute.queryParams,
          (params, queryParams) => ({ ...params, ...queryParams})
        );

        // Subscribe to the single observable, giving us both
        urlParams.subscribe(routeParams => {
            // routeParams containing both the query and route params
            this.loadUserDetail(routeParams.id, routeParams.type);
        });
    }
}

---

通过订阅阅读

import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-user-detail',
  templateUrl: 'user-detail.component.html'
})
export class UserDetailComponent implements OnInit {
    constructor(private activeRoute: ActivatedRoute) {
    }

ngOnInit() {
    this.activeRoute.queryParams.subscribe(queryParams => {
        // do something with the query params
    });

    this.activeRoute.params.subscribe(routeParams => {
        this.loadUserDetail(routeParams.id);
    });
}

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { RouterModule,Routes } from '@angular/router';
import { HelloComponent } from './hello.component';
import { AppComponent } from './app.component';

const routes:Routes = [{
       path:'PUC/P3', component:HelloComponent
    }]
@NgModule({
  imports:[ BrowserModule,FormsModule ,RouterModule.forRoot(routes,{useHash:true})],
  declarations: [ AppComponent, HelloComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-hello',
  template: `<h2>Check Console for Output</h2>`,
})
export class HelloComponent implements OnInit {
  constructor(private route:ActivatedRoute){}
  ngOnInit(){
    this.route.queryParams.subscribe((query)=>{
      console.log(query);
      console.log("MODE",query['MODE']);//output MODE:p
    });
  }
}

肮脏的道路

通过按如下方式嵌套订阅服务器：

ngOnInit() {
    // Nest them together and
    this.activeRoute.queryParams.subscribe(queryParams => {
        this.activeRoute.params.subscribe(routeParams => {
            this.loadUserDetail(routeParams.id, queryParams.type);
        });
    });
}

或者，您可能会尝试编写一个不同的版本，即将这些嵌套回调移到一个helper函数，然后将另一个接受查询和路由参数的回调传递给它，即

ngOnInit() {
    this.readUrlParams((routeParams, queryParams) => {
        this.loadUserDetail(routeParams.id, queryParams.type);
    });
}

readUrlParams(callback) {
    // Nest them together and
    this.activeRoute.queryParams.subscribe(queryParams => {
        this.activeRoute.params.subscribe(routeParams => {
            callback(routeParams, queryParams);
        });
    });
}

使用RxJS

RxJS是一个非常强大的库，您可以用几种不同的方法来实现它，但是我喜欢并发现自己使用最多的方法是使用CombineTest操作符，通过它我们合并路由和查询参数，并在一个对象中使用一个可观察到的对象。下面是我们更新后的示例的样子

import { ActivatedRoute } from '@angular/router';

// Add the observable and combineLatest
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/combineLatest';

@Component({
  selector: 'app-user-detail',
  templateUrl: 'user-detail.component.html'
})
export class UserDetailComponent implements OnInit {
    constructor(private activeRoute: ActivatedRoute) {
    }

    ngOnInit() {
        // Combine them both into a single observable
        const urlParams = Observable.combineLatest(
          this.activatedRoute.params,
          this.activatedRoute.queryParams,
          (params, queryParams) => ({ ...params, ...queryParams})
        );

        // Subscribe to the single observable, giving us both
        urlParams.subscribe(routeParams => {
            // routeParams containing both the query and route params
            this.loadUserDetail(routeParams.id, routeParams.type);
        });
    }
}

---

您所要做的就是将查询参数的值括在“中

<a [routerLink]="['/PUC','P3']" [queryParams]="{key:'stringvalue'}">Click here</a>

app.component.html

<a [routerLink]="['/PUC','P3']" [queryParams]="{ MODE: 'p', USER:'AE13356',PROJECT:00001,PROTOCOL:00002,VERSION:1}"> Click here</a>
<router-outlet></router-outlet>

---

您所要做的就是将查询参数的值括在“中

<a [routerLink]="['/PUC','P3']" [queryParams]="{key:'stringvalue'}">Click here</a>

app.component.html

<a [routerLink]="['/PUC','P3']" [queryParams]="{ MODE: 'p', USER:'AE13356',PROJECT:00001,PROTOCOL:00002,VERSION:1}"> Click here</a>
<router-outlet></router-outlet>

遗憾的是，
模式
仍然没有定义（编辑了我的问题）@JacopoSciampi，我不确定你的URL中是否有
#
。但如果没有，我已经更新了我的答案。我在某个地方读到，通常较旧的浏览器会在你的URL中添加一个
。遗憾的是
模式
仍然没有定义（编辑了我的问题）@JacopoSciampi，我不确定你的URL中是否有
。但如果没有，我已经更新了我的答案。我在某个地方读到，通常较旧的浏览器会在URL中添加
。