在 Angular 中维护同一组件的多个状态答案

【问题标题】：Maintain multiple state of same component in Angular在 Angular 中维护同一组件的多个状态
【发布时间】：2021-02-24 14:24:56
【问题描述】：

我们正在创建一个应用程序，其中将使用树视图组件动态显示用户列表，单击每个用户时，将显示一个新组件（app-user-profile-info），管理员可以从中选择一个项目下拉列表中的项目列表，一旦选择项目，项目相关详细信息将显示在同一组件中。到目前为止进展顺利。

main-page.component.html

<as-split-area size="75">
            <as-split direction="horizontal" restrictMove="true">
                <as-split-area size="18">
                    <p class="ml-3 mb-3 mt-3"><span class="e-underline">Tree View</span></p>
                    <tree [tree]="tree" (nodeSelected)="nodeSelected($event)"></tree>
                </as-split-area>
                <as-split-area size="82">
                    <app-main-component *ngIf="!viewProfile"></app-main-component>
                    <app-user-profile-info *ngIf="viewProfile"></app-user-profile-info>
                </as-split-area>
            </as-split>
 </as-split-area>

当点击不同的用户时，只有一个组件会被显示。在这种情况下，当我切换到下一个用户时，组件会再次渲染，并重置已选择的值。

app-user-profile-info.component.html

<div class="container-fluid">
 <div class="row">
        <div class="col-md-3">
            <div class="form-group">
                <ng-template #rt let-r="result" let-t="term">
                    {{ r.fileName}}
                </ng-template>
                <input type="search" class="form-control" #instance="ngbTypeahead" placeholder="Search"
                    aria-label="Search" [(ngModel)]="model"  [ngbTypeahead]="search" [resultTemplate]="rt"
                    [inputFormatter]="formatter" (focus)="focus$.next($event.target.value); displayData($event)"
                    (click)="click$.next($event.target.value)" (keyup)="displayData($event)">
                <small class="text-success">**please select an option in drop down**</small>
            </div>
        </div>
    </div>
    
    <div class="row mt-3">
      <div class="row">
        <div class="col">
            <table class="table table-bordered">
                <thead>
                    <tr>
                        <th>Index</th>
                        <th>Date</th>
                        <th>HoursWorked</th>
                        <th>TotalWorkHours</th>
                    </tr>
                </thead>
                <tbody>
                    <tr *ngFor="let data of streamData;">
                        <td><input type="checkbox" /></td>
                        <td>{{ data.index }}</td>
                        <td>{{ data.date }}</td>
                        <td>{{ data.HoursWorked || NA}}</td>
                        <td>{{ data.HoursWorked || NA}}</td>
                    </tr>   
                </tbody>
            </table>
        </div>
    </div>  
    
</div>

下面的场景是否可以在Angular中实现。

选择用户 A，然后渲染 app-user-profile-info 组件，然后在下拉列表中选择一个项目，显示项目详细信息
选择用户 B，然后在下拉列表中选择其他项目。
然后选择User A，是否可以自动选择&显示strep 1中已经选择的项目？

谢谢，磨难

【问题讨论】：

标签： angular

【解决方案1】：

当您单击用户时，您是否完全路由到一个新组件？如果是这种情况，我认为您正在寻找的解决方案是“mat-dialog” - https://material.angular.io/components/dialog/overview。

您可以在弹出的对话框中打开一个新组件，输入您想要的任何数据并将其返回到当前主组件，然后保存。你需要保留一个你选择的变量，字典可能在这里有用。

有一种方法可以将数据从一个组件传递到另一个组件（直接或通过将其保存到本地存储并加载它），但我认为它做得过火，在您的情况下不需要。

【讨论】：