如何根据查询字符串的值显示 Angular 个组件？

Question

我目前正在使用 Angular 4/5，假设我有 2 个组件 组件 1 和 组件 2.现在，我接到了一个任务，如果 URL 是 http://localhost:4200/?property1=value1, then Component 1 will be displayed and if the URL is http://localhost:4200/?property1=value2，那么将显示组件 2。

由于我是 Angular 的初学者，因此，我在这两个任务中遇到了问题。

每次从查询字符串中找到property1的值（即value1和value 2）
找到值后，如何定义逻辑即显示哪个组件？

虽然我找到了这个，但我无法找到使用该值查看组件的逻辑。请帮忙。

编辑：在处理@Osman Cea 的回答时，这是我得到的错误：

null: ERROR
null: Error: StaticInjectorError[ActivatedRoute]: 
__zone_symbol__currentTask: ZoneTask {_zone: Zone, runCount: 0, _zoneDelegates: null, …}
message: "StaticInjectorError[ActivatedRoute]: 
  StaticInjectorError[ActivatedRoute]: 
    NullInjectorError: No provider for ActivatedRoute!"
ngDebugContext: DebugContext_ {view: Object, nodeIndex: 1, nodeDef: Object, …}
ngErrorLogger: function () { … }
ngTempTokenPath: null
ngTokenPath: Array(1) []
stack: "Error: StaticInjectorError[ActivatedRoute]: 
  StaticInjectorError[ActivatedRoute]: 
    NullInjectorError: No provider for ActivatedRoute!
    at _NullInjector.get (webpack-internal:///../../../core/esm5/core.js:1189:19)
    at resolveToken (webpack-internal:///../../../core/esm5/core.js:1477:24)
    at tryResolveToken (webpack-internal:///../../../core/esm5/core.js:1419:16)
    at StaticInjector.get (webpack-internal:///../../../core/esm5/core.js:1290:20)
    at resolveToken (webpack-internal:///../../../core/esm5/core.js:1477:24)
    at tryResolveToken (webpack-internal:///../../../core/esm5/core.js:1419:16)
    at StaticInjector.get (webpack-internal:///../../../core/esm5/core.js:1290:20)
    at resolveNgModuleDep (webpack-internal:///../../../core/esm5/core.js:11074:25)
    at NgModuleRef_.get (webpack-internal:///../../../core/esm5/core.js:12306:16)
    at resolveDep (webpack-internal:///../../../core/esm5/core.js:12804:45)"
__proto__: Object {constructor: , name: "Error", message: "", …}
null: ERROR CONTEXT
null: DebugContext_ {view: Object, nodeIndex: 1, nodeDef: Object, elDef: Object, elView: Object}
component: null
componentRenderElement: app-root
context: null
elDef: Object {nodeIndex: 0, parent: null, renderParent: null, …}
elOrCompView: Object
elView: Object {def: Object, parent: null, viewContainerParent: null, …}
injector: Injector_
nodeDef: Object {nodeIndex: 1, parent: Object, renderParent: Object, …}
nodeIndex: 1
providerTokens: Array(1)
references: Object
renderNode: app-root
view: Object {def: Object, parent: null, viewContainerParent: null, …}
__proto__: Object {elOrCompView: <accessor>, injector: <accessor>, component: <accessor>, …}
null: Error: StaticInjectorError[ActivatedRoute]:

Answer 1

您可以通过在父组件中注入 ActivatedRoute 并订阅它来获取 queryParams Observable 的引用。假设您有以下 app.component.ts:

import { ActivatedRoute } from '@angular/router';
@Component({
  template: `
    <ng-container [ngSwitch]="activeParam">
      <component-one *ngSwitchCase="'value1'"></component-one>
      <component-two *ngSwitchCase="'value2'"></component-two>
    </ng-container>
  `
})
export class AppComponent {
  activeParam: string;

  constructor(private route: ActivatedRoute) {
    this.route.queryParams.subscribe(params => this.activeParam = params.property1)
  }
}

您在 params 参数中得到的是具有以下签名的普通常规对象 { [key: string]: any } 其中键是参数的名称，而值...好吧，值给定的参数。您可以在 activeParam 属性中获取该值，并使用 ngSwitch 指令来决定要渲染的组件。

你也可以像这样使用 Observables 和 async 管道来做到这一点：

import { ActivatedRoute } from '@angular/router';
import { Observable } from 'rxjs/Observable';
import { pluck } from 'rxjs/operators';
@Component({
  template: `
    <ng-container [ngSwitch]="activeParam$ | async">
      <component-one *ngSwitchCase="'value1'"></component-one>
      <component-two *ngSwitchCase="'value2'"></component-two>
    </ng-container>
  `
})
export class AppComponent {
  activeParam$: Observable<string>;

  constructor(private route: ActivatedRoute) {
    this.activeParam$ = this.route.queryParams.pipe(pluck('property1'))
  }
}

在这种情况下，您提取分配给订阅可观察对象时获得的对象中的 property1 键的值，这样它会安全地忽略那些 queryParams 你实际上不需要观察，并且 Observable 的 value 将是 value1 或 value2，或者它之后的任何东西url 中的 =。

如何根据查询字符串的值显示 Angular 个组件？

How to show Angular components based on the value of query string?

query-string

angular-routing

angular2-routing

angular

angular5