在 Angular 中的 HTML 页面之间传递参数答案

【问题标题】：passing parameter between HTML pages in Angular在 Angular 中的 HTML 页面之间传递参数
【发布时间】：2020-12-07 21:50:20
【问题描述】：

我是 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 中，我订阅了一个 observable 以获取查询参数：

    ngOnInit()
{
     this.route
    .queryParams
    .subscribe(params => {
        this.source = params['source'] || '';
    })

但它没有传递值。

注意：如果我在loan-submenu.component.html 的查询参数中硬编码一个字符串，如[queryParams]="{source: 'history'}" 中的那样，则参数传递正确。问题是从包含标签的包含页面中获取它。

感谢任何建议

更新根据 ashwinlagji 发给我的链接，我确认我在父组件中使用了 @input。但是，我所做的一项更改是在使用自定义标签的父 html 中，我添加了参数名称而不是字符串：<home-loan-submenu [loanId]="loan.loanHeaderId" [source] = source></home-loan-submenu>

在组件文件中，我为“source”参数分配了一个值，并按预期将其作为查询参数传递但是，有一点我没有沟通。 HTML 页面有两个部分，一个是活动贷款，另一个是贷款历史。这两个部分的代码结构相同。我需要知道用户从哪个部分单击，因此名称为“源”。通过在 HTML 中硬编码“源”的值，我希望它将该值作为源值传递回子页面。

【问题讨论】：

能否请您为我准确一些：您的源参数是否正确显示在 url 中？还是获取参数值的问题？
好问题。它是参数值。 “ ?source=" 在 URL 中。
@USMC6072 您可能应该考虑在属性上使用 @Input 装饰器访问该值。控制器中的@Input('source') source 应该为您提供源值。更多详细信息@Input 链接
ashwinlagji，我正在查看您提供的链接。

标签： angular query-parameters

【解决方案1】：

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

【讨论】：