如何使用查询参数通过 URL 导航到 Angular 路线？

Question

在我当前的项目中，我有一个用户配置文件路径，我目前已将其设置为动态导航。也就是说，当用户导航到该页面时，用户的 _id 将传递给 localStorage，然后使用该 _id 查询 MongoDB。然后加载所有相关的用户数据进行显示，一切正常。

这会导致用户无法通过在地址栏中粘贴 link 或单击通过电子邮件或短信传递的 link 直接导航到他们的个人资料的问题。除非通过 ActivatedRoute 传递参数，否则甚至没有要复制的 URL。但是 URL 现在基本上是 "just for show" 因为我没有对 URL.

中的参数做任何事情

我想创建允许通过 URL 直接导航的功能。下面是我当前的尝试，但它不起作用，因为我相信，页面是在 API 响应之前呈现的。我该如何解决这个问题？

谢谢。

import {AfterViewInit, Component, OnInit } from '@angular/core';
import {AuthService} from '../../services/auth.service';
import {ActivatedRoute} from '@angular/router';


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

  member: any;
  isAdmin: boolean;      
  areas: any[];
  params: any;
  canDisplay: boolean = false;

  constructor(private authService: AuthService,
              private route: ActivatedRoute) {        
  }

  ngOnInit() {
    this.isAdmin = this.authService.isAdmin();
    localStorage.setItem('member_id', this.member_id);
    this.getMember(this.route.snapshot.params['user_id']);        
  }

  ngAfterViewInit() {
    console.log(this.member);
  }

  getMember(url) {
    this.authService.getProfile(url).subscribe(member => {
      this.member = member;
    });        
  }

  getParams() {
    this.route.params.map(params => {
      console.log(params);
    });
  }

  setMemberData() {        
    let tempArray = [];
    tempArray = this.member.practice.split(',');
    this.areas = tempArray;
  }

}

Answer 1

您在从您的服务请求它之前试图使用 this.member_id，更不用说在服务 returns 一个值之前。

在 ngOnInit 订阅 ActiveRoute，然后 returns 然后打电话给你的 authService。（您可以将 map() 视为转换响应的中间件，订阅用于调用可观察对象）

这将确保 member_id 在您将其传递给您的服务并设置本地存储时可用。

this.route.params.subscribe(params => {
  this.authService.getProfile(params.member_id).subscribe(member => {
    this.member = member;
    localStorage.setItem('member_id', this.member.member_id);
    });  
});

如何使用查询参数通过 URL 导航到 Angular 路线？

How do I navigate to an Angular route via URL with query params?

javascript

mean-stack

angular

angular5