在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页面有两个部分，一个是“活动贷款”，另一个是“贷款历史”。这两部分的代码结构相同。我需要知道用户单击哪个部分，因此命名为“源”。通过在HTML中对“源”的值进行硬编码，我希望它可以将该值作为源值传递回子页面。

解决方法

除了上述更新之外，最后，我在父组件页面中创建了两个变量，并在HTML的相应部分中使用了每个变量。现在，我显示了正确的查询字符串值。