如何解决组件加载角度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}})
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。