Angular 6将参数传入URL

时间:2018-11-24 05:30:28

标签: javascript angular routing

因此,我有一个有角度的应用程序,该应用程序当前具有诸如“ urlname / stockdata”的路由。我希望能够将一个股票代码传递到该URL中,例如“ urlname / stockdata / AAPL”。我的应用正在使用该符号调用第三方API。你们对我该怎么做有什么建议吗?任何帮助表示赞赏。谢谢

3 个答案:

答案 0 :(得分:4)

您可以使用以下参数声明路由:

export const routes: Routes = [
  { path: 'urlname/stockdata/:id', component: MyComp}
];

在模板中创建链接:

<a [routerLink]="['/urlname/stockdata', id]">MyLink</a>

或从.ts导航:

 this.router.navigate(['/urlname/stockdata', id]);

然后您可以使用以下内容阅读它:

constructor(private route: ActivatedRoute) {}

this.route.params.subscribe(params => {
  this.id = params['id'];
});

答案 1 :(得分:2)

TS文件

const routes: Routes = [{
  path: '',
  children: [{
    path: 'plans/:id',
    component: PlanListComponent,
    canActivateChild: [AuthGuard]
  }]
}];

HTML

<a class="dropdown-item" (click)="viewDetails(product.id)">View Detail</a>

TS

 viewDetails (productId) {
        this.router.navigate([ BASE_URL +"/plans/" + productId]);
    }

答案 2 :(得分:0)

首先,考虑到您必须在URL中发送例如4个参数。 区域 MP JC
为此文件 sample.component.ts


 functionName() {
 let param={
      zone:this.selectZone,
      state:this.selectState,
      jc:this.stateJC,
      mp:this.MPdata
    }

 this.availservice.AvailReport(param)
      .subscribe((json) => {
      this.ArrayResponse= json;
      } );
}

现在提起诉讼 sample.service.ts

 AvailReport(param) {  
let UrlTemp= `http://11.111.11.11:3838/getdata/AVAILABILITY_${param.zone}_${param.state}_${param.jc}_${param.mp}.JSON?callback=true`;
    return this.http.get(UrlTemp);
  }

确保您会得到像这样的答复:

Request URL: http://10.141.55.49:3838/getdata/AVAILABILITY_ZoneName_StateName_MPName_JCName.JSON?callback=true

使用此方法,您可以在URL中传递任意数量的参数,并要求您的后端团队接收这些参数。