Удалить селекторный знак углового2

Question

У меня есть пользовательский компонент для 2 шаблонов. Первый шаблон для таблицы пользователей, второй для пользовательской страницы. Я выбираю, какой шаблон использовать для атрибута role.

Первый пример использования:

<table> 
    <tr user *ngFor="let user of users" [user]="user" role="UserTableItem"></tr> 
</table> 

В другом одном шаблоне я использую мой компонент, как это:

<div user [user]="user" role="UserCard"></div> 

Итак, мой 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 blocks, 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 компонент:

// 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> 
    // ... 

Answer 1

Я нахожу ваш вопрос немного запутанным, но я предполагаю, что вы хотите селектор

@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>