Маршрутизация с параметром params с?а также & - PullRequest
Новая
       22

Маршрутизация с параметром params с?а также &

0 голосов
/ 17 октября 2018

Я пытаюсь глубоко взглянуть на маршрут Ангуляра, но безуспешно.То, что я пытаюсь сделать, это перехватить все параметры внутри URL, используя маршрут angular.

Итак, давайте возьмем в качестве примера этот 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.

Ответы [ 3 ]

0 голосов
/ 17 октября 2018

Чтение по подписке 

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

Грязный путь

Вложив подписчиков, как показано ниже: 

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

Или у вас может возникнуть желание написать разнообразную версию этого, то есть переместить эти вложенные обратные вызовы в вспомогательную функцию, а затем передать ей еще один обратный вызов, принимающий параметры запроса и маршрута, например 

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 - действительно мощная библиотека, и вы можете сделать это несколькими различными способами, но один из них, который мне нравится и который я использую чаще всего, - это использование оператора combLatest, с помощью которого мы объединяем маршрут и запроспараметры и имеют одну наблюдаемую, давая нам обоим в одном объекте.Вот как будет выглядеть наш обновленный пример 

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);
        });
    }
}
0 голосов
/ 17 октября 2018

Все, что вам нужно сделать, это заключить значение параметров запроса в "" .

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

Заключение в "" необязательно, если значением параметра запроса является число. 

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

app.moudle.ts 

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 { }

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>

hello.component.ts 

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

Вы также можете увидеть рабочий раствор здесь в stackblitz

0 голосов
/ 17 октября 2018

Снимок не предоставляет обновленные параметры queryParams при их изменении.Но есть queryParams BehaviorSubject на ActivatedRoute, который дает вам обновленные параметры запроса.

Вы должны использовать route.queryParams.subscribe для этого.

Теперь я неуверен, как обработать это # в вашем URL.Но без этого, поскольку у вас есть PUC как маршрут и P3 как его дочерний элемент, ваша конфигурация маршрута будет выглядеть примерно так: 

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

Что касается маршрута 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));
  }

}

Вот Образец StackBlitz для вашей ссылки.

...