Angular:查询参数值包含路由值

时间:2017-07-25 07:52:46

标签: angular angular-routing

我有一个类似http://example.com/login/?redirect="/user#account"的网址,因此我在此处存储redirect值,并在成功登录后使用该值导航到该页面。如果redirect查询中没有任何# (hash)值,这可以正常工作,但是如果它有,那么即使用户未被记录,它也需要#value并重定向到该路由,它应该重定向到http://example.com/login/#/login如果没有登录。

1 个答案:

答案 0 :(得分:0)

Angular 4创建URL和路由的方式如下:

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';

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

  constructor(private router: Router) { }

  ngOnInit() {
  }

  onLoadServers(id: number){
    this.router.navigate(['/servers', id, 'edit'],{queryParams: {allowEdit: '1'}, fragment: 'loading'});
  }

} 

由于 onLoadServers()中的命令导航,您将收到以下路线视图:

  

http://localhost:4200/servers/1/edit?allowEdit=1#loading

正如你所说,没有""。

在通过此路线加载的组件中,您可以接收查询参数和片段(在这种情况下加载 - ):

constructor(private route: ActivatedRoute) { }

ngOnInit() {
  console.log(this.route.snapshot.queryParams);//{allowEdit:"1"}
  console.log(this.route.snapshot.fragment);//loading
}