Question

由于我是角度2/4的新用户，因此无法根据需要设置新应用程序。

我正在尝试构建一个将从其他应用程序调用的应用程序。调用应用程序将发送一些参数，如令牌，用户名，应用程序ID等。

现在，与Angular 2/4一样，app.component是我们的登陆组件，每个第一个请求都将通过它。所以，我想在app组件中获取这些参数并加载一些用户细节，进行本地会话以及移动到其他东西。

问题是，当我尝试访问这些参数时，我得到了任何东西。

这是将启动我的角度应用程序的URL： http://localhost:86/dashboard?username=admin&token=xyz&appId=8

这是我的路由文件代码：

＆＃13;

const routes: Routes = [
  {
    path: 'dashboard/:username, token', component: AppComponent
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule {

}

＆＃13;

这是我的应用程序组件代码：

＆＃13;

import { Component, OnInit } from '@angular/core';
import { AuthenticationService } from 'app/services/authentication/authentication.service';
import { User } from 'app/models/user/user';
import { AppConfig } from 'app/helpers/AppConfig';
import { ActivatedRoute, Router } from '@angular/router';


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  _user: User = new User();
  obj: any;
  error: any;

  loginName: string;
  private id: any;

  constructor(
    private authenticationService: AuthenticationService,
    private config: AppConfig,
    private route: ActivatedRoute,
    private router: Router

  ) { }

  ngOnInit() {    
    this.loadCurrentUserDetail();
    this.getParamValues()

  }

  getParamValues() {
    this.id = this.route.queryParams.subscribe(params => {      
       this.loginName = params['username']; 
    });
  }

＆＃13;

这里的参数是空的，不知道为什么？

提前致谢！

在图像参数中，对象没有任何东西。

Answer 1

这是你进入角度5 +的方式：

import { Router  , ActivatedRoute } from '@angular/router';

constructor(private route: ActivatedRoute){}
ngOnInit() {
    console.log(this.route.snapshot.params['username']);
}

更新人们正在贬低的原因： 以上快照方法。一旦启动组件，快照方法就会为您提供结果。因此，如果您更改路线或销毁组件并仅重新启动，这将继续工作。

为每个路线更改时想要更新参数的任何人的解决方案

import { Router , ActivatedRoute } from '@angular/router'; constructor(private route: ActivatedRoute){} ngOnInit() { console.log(this.route.snapshot.params['username']); // works first time only /** For later use, updates everytime you change route*/ this.route.params.subscribe((parmas) => {console.log(params['username'])}); }

Answer 2

此帖解决了问题。 here

我需要创建一个单独的组件Root，并且我保留了我的Router-Outlet并添加了这个组件作为我的引导程序模块，它工作了!!我没有超过50的声望，如果我有，我会在同一篇文章上感谢他。谢谢男人@Fabio Antunes

Answer 3

 .flex-wrapper{
      background-color: lightgray;
      padding: 30px;
      padding: 30px 30px 30px 100px;
    }
    .flex-container {
      display: flex;
      background-color: #f1f1f1;
    }
    
    .flex-container > div {
      margin: 10px;
      padding: 10px;
      font-size: 16px;
    }
    .flex-container{
        -webkit-box-shadow: 0 0 10px 1px rgba(0,0,0,0.2);
           -moz-box-shadow: 0 0 10px 1px rgba(0,0,0,0.2);
                box-shadow: 0 0 10px 1px rgba(0,0,0,0.2);
    }
    .avatar-wrapper{
    min-width: 150px;
        position: relative;
        margin-left: -50px !important;
        margin: 10px;
        padding: 10px;
        font-size: 16px;
        height: 150px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .avatar-wrapper:after{
        content: '';
        height: calc(100% + 40px);
        width: calc(100% + 40px);
        position: absolute;
        background: purple;
        top: -20px;
        left: -20px;
        border-radius: 50%;
        z-index: 0;
    }
    
    
    .avatar-wrapper > img{
        width: 150px;
        height: 150px;
        z-index: 1;
        position: relative;
        border-radius: 50%;
    }

Angular 2/4如何在app组件中获取路由参数？

3 个答案: