组件加载角度8

问题描述

我有一个带有名称，电子邮件ID，地址和手机号码的对象列表。该列表中的“名称”将显示为每行（左侧组件）。当我单击每个名称时，相应的数据（电子邮件ID，地址和手机号码）应显示在右侧部分。

我为此使用了 routerlink 。但是问题是我必须指定所有数据（如果要在用户数据中添加更多字段，将很困难）

 <a [routerLink]="['/user',user.email,user.name,user.address.line1,user.address.line2,user.mobile]"
            class="list-group-item"  *ngFor="let user of userList">
            {{ user.name }}
</a>

和

{
      path: 'offer',component: UserComponent,children:[
        {
          path:'/:id/:name/:address1/:address2/:mobile',component:UserDetailsComponent
        }],},

有人可以帮助我吗要将数据作为完整的对象“用户”以及要在路由中给定的路径发送，或
以任何其他可能的方式显示此组件（当我用Google搜索时，通常会看到“ routerlink”选项）

预先感谢

解决方法

当您有2个不在“父子关系”中的组件时，通常使用Service。
现在您有了一些选择，可以在服务上设置一个变量，然后该变量将保存数据。另一种选择是使用Observable，例如Subject或BehaviourSubject，然后可以使用“正确的”组件进行订阅。

如果我对您的理解正确，我将不在此处使用路由。而是创建一个UserComponent并在User Components上使用* ngFor：

 <div *ngFor="let user of userList">
     <app-user [userData]="user"><app-user>
 </div>

这样，您可以将User对象传递给创建的每个User Components。要在用户组件中获取用户数据，必须使用@Input装饰器：

@Component({
  selector: 'app-user',templateUrl: './user.component.html',styleUrls: ['./user.component.scss'],})
export class UserComponent {
  @Input() userData: userData;
}

然后，您可以使用（单击）用户组件上的事件来对数据进行操作。

（user.name和其余细节将在每个子User组件中显示。在我的示例中，{{user.name}}当然是{{userData.name}}）

angular angular-routerlink angular8