刪除angular2組件的選擇器標簽

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塊， 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>