angularjs – 删除angular2组件的选择器标签
发布时间:2020-12-17 17:42:00 所属栏目:安全 来源:网络整理
导读:我有一个用于2个模板的用户组件.用户表的第一个模板,用户页面的第二个模板.我选择按角色属性使用的模板. 第一个使用示例: table tr user *ngFor="let user of users" [user]="user" role="UserTableItem"/tr/table 在另一个模板中,我使用我的组件,如下所示
我有一个用于2个模板的用户组件.用户表的第一个模板,用户页面的第二个模板.我选择按角色属性使用的模板.
第一个使用示例: <table> <tr user *ngFor="let user of users" [user]="user" role="UserTableItem"></tr> </table> 在另一个模板中,我使用我的组件,如下所示: <div user [user]="user" role="UserCard"></div> 那么,我的用户组件模板: // user.template.html <user-card [user]="user" *ngIf="role === 'UserCard'"></user-card> <user-list-item [user]="user" *ngIf="role === 'UserListItem'"></user-list-item> 我们可以看到,这里有两个组件user-card和user-list-item.用户卡包含div块,user-list-item包含td块.并且表崩溃了,因为我有一个< user-list-item>阻止里面和我的表看起来像: <table> <tr> <user-list-item> <td></td> <td></td> </user-list-item> </tr> </table> 我怎样才能解决我的问题并获得这样的表格? <table> <tr> <td></td> <td></td> </tr> </table> UPD: 我的用户组件: // user.component.ts import { Component,Input,Inject,Attribute } from '@angular/core'; import { UserCard } from './userCard.component'; import { UserListItem } from './userListItem.component'; @Component({ selector: '[user]',templateUrl: './user.template.html',directives: [UserCard,UserListItem] }) export class User { @Input() user:any = null; role:string; constructor( @Attribute('role') role) { this.role = role; } } userListItem.template.html: <td> {{user.id}} </td> <td> <img src="{{user.avatarUrl160}}" alt="User profile picture" width="160"> </td> // ... userCard.template.html: <div class="card card-block" *ngIf="user"> <h4 class="card-title"> User #{{user.id}} <span class="tag tag-success" *ngIf="!user.isBanned">Active</span> <span class="tag tag-danger" *ngIf="user.isBanned">Banned</span> <span class="tag tag-danger" *ngIf="user.isDeleted">Deleted</span> </h4> <p> <img width="340" src="{{user.avatarUrl160}}"> // ... </div> <div class="card card-block" *ngIf="user"> <span class="text-muted">Company: </span> {{user.company.name}}<br> <span class="text-muted">Company logo: </span> // ... 解决方法
我发现你的问题有点令人困惑,但我想你想要的是一个属性选择器
@Component({ selector: '[user-list-item]',... }) export class UserListItem { ... } 而不是 <user-card [user]="user" *ngIf="role === 'UserCard'"></user-card> <user-list-item [user]="user" *ngIf="role === 'UserListItem'"></user-list-item> 使用 <td user-card [user]="user" *ngIf="role === 'UserCard'"></td> <td user-list-item [user]="user" *ngIf="role === 'UserListItem'"></td> (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |