Question

我正在使用VS 2017（框架2.7）和Angular 5开发我的应用程序。我想从网址获取参数值。我在 app.module.ts 中写了以下内容：

RouterModule.forRoot([
      { path: '', component: HomeComponent, pathMatch: 'full' },
      { path: 'counter', component: CounterComponent },
      { path: 'fetch-data', component: FetchDataComponent },
      { path: 'create-strings', component: CreateStringsComponent },
      { path: 'strings/edit/:id', component: CreateStringsComponent },
      { path: 'fetch-strings/:prop', component: StringsComponent },
      { path: 'fetch-strings/:prop', component: StringsComponent },
      { path: 'fetch-strings/:prop', component: StringsComponent }

      //{ path: '**', redirectTo: 'home' }  
    ])
  ],

nav-menu.component.htm l菜单文件如下：

<li [routerLinkActive]='["link-active"]'>
              <a [routerLink]="['/fetch-strings']" [queryParams]="{prop: 'loc'}" (click)='collapse()'>
                <span class='glyphicon glyphicon-th-list'></span> Strings
              </a>
            </li>
            <!--https://stackoverflow.com/questions/37880876/how-to-pass-query-parameters-with-a-routerlink-in-the-new-router-v-3-alpha-vlad-->
            <li [routerLinkActive]='["link-active"]'>
              <a [routerLink]="['/fetch-strings']" [queryParams]="{prop: 'dep'}" (click)='collapse()'>
                <span class='glyphicon glyphicon-th-list'></span> Department
              </a>
            </li>
            <li [routerLinkActive]='["link-active"]'>
              <a [routerLink]="['/fetch-strings']" [queryParams]="{prop: 'des'}" (click)='collapse()'>
                <span class='glyphicon glyphicon-th-list'></span> Designation
              </a>
            </li>

我想捕获参数值并相应地更改页面的和标题。为此，我在 Strings.Component.ts 文件中编写了以下代码：

 constructor(public http: Http, private _router: Router, private _stringsService: StringsService, private _activeRoute: ActivatedRoute) {
        this.getStrings();
    }

    //https://stackoverflow.com/questions/45309131/angular-2-4-how-to-get-route-parameters-in-app-component
    ngOnInit() {
        debugger;
        //console.log(this._activeRoute.snapshot.params['prop']);

        //this.var1 = this._activeRoute.snapshot.params['prop'];
        //this.var2 = this._activeRoute.params.subscribe(params => { this.var1 = params['prop']; });

        this._activeRoute.queryParams.subscribe((prop: Params) => {
            console.log(prop);
        });

        if (this.var1 == "loc") {
            this.title = "Location";
        }
        else if (this.var1 == "dep") {
            this.title = "Department";
        }
        else if (this.var1 == "des") {
            this.title = "Designation";
        }
    }

代码：

this._activeRoute.queryParams.subscribe((prop: Params) => {
            console.log(prop);
        });

正确显示参数值。 1）但是如何将参数值存储在变量中，以便可以使用它动态更改标题。

this.var1 = this._activeRoute.snapshot.params['prop'];

不起作用。

2）第二个问题，当我单击其他链接（ nav-menu.component.html 文件）时，第一个菜单始终保持选中状态。

有任何线索吗？

谢谢

Partha

Answer 1

从routerLinkActive指令中删除输入属性绑定

  <li routerLinkActive='["link-active"]'>
                  <a [routerLink]="['/fetch-strings']" [queryParams]="{prop: 'loc'}" (click)='collapse()'>
                    <span class='glyphicon glyphicon-th-list'></span> Strings
                  </a>
                </li>
                <!--https://stackoverflow.com/questions/37880876/how-to-pass-query-parameters-with-a-routerlink-in-the-new-router-v-3-alpha-vlad-->
                <li routerLinkActive='["link-active"]'>
                  <a [routerLink]="['/fetch-strings']" [queryParams]="{prop: 'dep'}" (click)='collapse()'>
                    <span class='glyphicon glyphicon-th-list'></span> Department
                  </a>
                </li>
                <li routerLinkActive='["link-active"]'>
                  <a [routerLink]="['/fetch-strings']" [queryParams]="{prop: 'des'}" (click)='collapse()'>
                    <span class='glyphicon glyphicon-th-list'></span> Designation
                  </a>
                </li>

如果您想从参数中获取prop值，则必须使用该url，否则数据将为undefined或null

this._activeRoute.snapshot.params['prop'];

如果要获取queryParams，请使用snapshot.queryParams

this._activeRoute.snapshot.queryParams['prop']

Answer 2

这可能会有所帮助。

this.var1 = this._activeRoute.snapshot.paramMap.get('prop');

引用angular.io

希望这对您有帮助！！

Answer 3

以下代码解决了我的问题：

this.var1 = this._activeRoute.snapshot.queryParams.prm;

prm->是参数的名称。

谢谢

以角度

3 个答案: