如何解决在Angular的HTML页面之间传递参数
我是Angular的新手,所以如果我使用错误的术语,请原谅我。现有的Component.HTML页面包含一个自定义标签,它是一个菜单。根据标签放置的位置,我想传递一个将被视为查询参数的参数。最终,我将该参数传递给API端点。该参数是可选的,因此我不想(不能)使用路由器参数。
下面的代码显示了component.html的一部分,其中包含标签<home-loan-submenu style="display: contents;" [loanId]="loan.loanHeaderId" [source]=source ></home-loan-submenu>
在此标签中,我尝试传递“源”参数
<h3 *ngIf="history.length > 0">PrevIoUs Loans</h3>
<mat-expansion-panel *ngIf="history.length > 0">
<mat-expansion-panel-header>
<mat-panel-title>
PrevIoUs Loan History
</mat-panel-title>
</mat-expansion-panel-header>
<div fxLayout="column">
<mat-card class="loan-history-item" *ngFor="let loan of history" fxFlex="grow" fxLayout="column center" fxLayoutGap="0px">
<mat-card-content fxLayout="column">
<div fxLayout="row" fxFlex fxLayoutAlign="space-evenly center" fxLayoutGap="10px">
<div>
{{ loan.publicLoanId }}
</div>
<div>
Orig. Date: {{ loan.originationDate | date: 'M/d/yy' }}
</div>
<div>
Status: {{ loan.loanStatus }}
</div>
<home-loan-submenu style="display: contents;" [loanId]="loan.loanHeaderId" [source]="history" ></home-loan-submenu>
</div>
</mat-card-content>
</mat-card>
</div>
</mat-expansion-panel>
在home-loan-submenu.component.html中,我正在创建查询参数:
<mat-menu #menu="matMenu">
<a mat-menu-item *ngIf="showMenuOption(MenuOption.ContractsReceipts)" [routerLink]="['/',loanId,'contracts-receipts']" [queryParams]="{source: source}" ><span>Contracts & Receipts</span></a>
<!-- <a mat-menu-item *ngIf="showMenuOption(MenuOption.TransactionHistory)" [routerLink]="['/transaction-history/loan',loanId]" ><span>Transaction History</span></a> -->
</mat-menu>
在home-loan-submenu.component.ts中,我订阅了一个可观察的查询参数:
ngOnInit()
{
this.route
.queryParams
.subscribe(params => {
this.source = params['source'] || '';
})
但它没有传递值。
注意:如果我将贷款中的字符串硬编码为{-{1}}中的贷款参数,则参数正确传递。问题是从包含该标签的包含页面中获取它。
我很感谢任何建议
更新
根据ashwinlagji发送给我的链接,我确认我在父组件中使用了@input。但是,我所做的一个更改是在使用自定义标记的父html中,我添加了参数名称而不是像这样的字符串:[queryParams]="{source: 'history'}"
在组件文件中,我为“源”参数分配了一个值,并按预期方式作为查询参数传递了该值。
解决方法
除了上述更新之外,最后,我在父组件页面中创建了两个变量,并在HTML的相应部分中使用了每个变量。现在,我显示了正确的查询字符串值。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。