问题描述
我有一个用于 2 个模板的用户组件.用户表的第一个模板,用户页面的第二个模板.我通过 role
属性选择要使用的模板.
第一个使用示例:
<tr user *ngFor="让用户的用户" [user]="user" role="UserTableItem"></tr>
在另一个模板中,我像这样使用我的组件:
所以,我的user
组件模板:
//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
.user-card
包含 div
块,user-list-item
包含 td
块.表崩溃了,因为我在里面有一个 <user-list-item>
块,我的表看起来像:
<tr><用户列表项><td></td><td></td></user-list-item></tr>
我怎样才能解决我的问题并得到这样的桌子?
<tr><td></td><td></td></tr>
UPD:
我的user
组件:
//user.component.ts从@angular/core"导入{组件、输入、注入、属性};从 './userCard.component' 导入 { UserCard };从 './userListItem.component' 导入 { UserListItem };@成分({选择器:'[用户]',templateUrl: './user.template.html',指令:[UserCard, UserListItem]})导出类用户{@Input() 用户:any = null;角色:字符串;构造函数(@Attribute('role') 角色) {this.role = 角色;}}
userListItem.template.html
:
{{用户身份}}</td><td><img src="{{user.avatarUrl160}}" alt="用户头像" width="160"></td>//...userCard.template.html
:
<h4 class="card-title">用户#{{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><p><img width="340" src="{{user.avatarUrl160}}">//...<div class="card card-block" *ngIf="user"><span class="text-muted">公司:</span>{{user.company.name}}
<span class="text-muted">公司标志:</span>//...
解决方案 我觉得你的问题有点令人困惑,但我猜你想要的是一个属性选择器
@Component({选择器:'[用户列表项]',...})导出类 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>
I have a user component for 2 templates. First template for users table, second one for a user page. I select which template to use by role
attribute.
First example of using:
<table>
<tr user *ngFor="let user of users" [user]="user" role="UserTableItem"></tr>
</table>
In another one template I use my component like this:
<div user [user]="user" role="UserCard"></div>
So, my user
component template:
// user.template.html
<user-card [user]="user" *ngIf="role === 'UserCard'"></user-card>
<user-list-item [user]="user" *ngIf="role === 'UserListItem'"></user-list-item>
As we can see, here two components user-card
and user-list-item
. user-card
contains div
blocks, user-list-item
contains td
blocks. And table crashed because I have a <user-list-item>
block inside and my table looks like:
<table>
<tr>
<user-list-item>
<td></td>
<td></td>
</user-list-item>
</tr>
</table>
How can I solve my problem and get table like this?
<table>
<tr>
<td></td>
<td></td>
</tr>
</table>
UPD:
My user
component:
// 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>
// ...
解决方案 I find your question a bit confusing but I guess what you want is an attribute selector
@Component({
selector: '[user-list-item]',
...
})
export class UserListItem { ... }
and instead of
<user-card [user]="user" *ngIf="role === 'UserCard'"></user-card>
<user-list-item [user]="user" *ngIf="role === 'UserListItem'"></user-list-item>
use
<td user-card [user]="user" *ngIf="role === 'UserCard'"></td>
<td user-list-item [user]="user" *ngIf="role === 'UserListItem'"></td>
这篇关于移除 angular2 组件的选择器标签的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!
09-02 01:52