Question

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

这会出现用户无法通过粘贴地址栏中的链接或点击通过电子邮件或短信传递的链接直接导航到其个人资料的问题。除非参数通过ActivatedRoute传递，否则甚至没有要复制的URL。但是网址现在基本上是＃34;仅用于节目＆＃34;因为我没有对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，更不用说在服务返回值之前。

在ngOnInit订阅ActiveRoute并在何时返回，然后致电您的authService。（您可以将map()视为转换响应的中间件，订阅用于调用observable）

这将确保在将member_id传递给您的服务并设置本地存储时，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路径？

1 个答案: