Question

我目前正在使用Angular 4/5，假设我有2个组件组件1 和组件2 。现在，我已经接到一项任务，如果URL为http://localhost:4200/?property1=value1，则会显示组件1，如果URL为http://localhost:4200/?property1=value2，则会显示组件2。

因为我是Angular的初学者，所以我在这两项任务中遇到了问题。

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

虽然我找到了link，但我找不到使用该值来查看组件的逻辑。请帮忙。

编辑：在完成@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

您可以通过在父组件中注入queryParams并订阅它来获取ActivatedRoute 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 }，其中key是param的名称，值是......嗯，给定的值PARAM。您可以在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'))
  }
}

在这种情况下，你提取分配给订阅observable时获得的对象中property1键的值，这样它就会安全地忽略那些queryParams你实际上并不需要观察，Observable的值可以是value1或value2，也可以是=之后的Google: High priority Yahoo: medium priority Microsoft: low priority网址。

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

1 个答案: