angular2コンポーネントのselectorタグを削除します

Question

2つのテンプレート用のユーザーコンポーネントがあります。ユーザーテーブルの最初のテンプレート、ユーザーページの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> 

ここでは2つの成分、user-cardとuser-list-itemが見えます。 user-cardは、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コンポーネント：

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