Angular 6将参数传递到URL中

Question

我有一个Angular应用程序，目前有一个名为"urlname/stockdata"的路由。 我想能够将股票符号传递到该URL中，例如"urlname/stockdata/AAPL"。 我的应用正在使用该符号调用第三方API。 你们有任何建议吗？ 感谢任何帮助。

- Vlad Bogza

Answer 1

您可以像这样声明具有参数的路由：

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'];
});

- Maarti

---

这对我非常有效。问题是：如何使用直接的URL使其工作？我遇到了一个错误：“拒绝应用来自'http://localhost:4200/userAdmin/styles.css'的样式，因为它的MIME类型（'text/html'）不是受支持的样式表MIME类型，并且启用了严格的MIME检查。” - Jake v1

Answer 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]);
    }

- Sandeep Patel

Answer 3

首先，考虑您必须在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中传递任意数量的参数，并要求您的后端团队接收这些参数。

- Devashish Maurya