Usuń znacznik wyboru komponentu kątowego2

Question

Mam komponent użytkownika dla 2 szablonów. Pierwszy szablon dla tabeli użytkowników, drugi dla strony użytkownika. Wybieram szablon do użycia przez atrybut role.

Pierwszy przykład użycia:

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

W innym jednym szablonie używam komponentu tak:

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

Więc moje user szablon komponent:

// user.template.html 

<user-card [user]="user" *ngIf="role === 'UserCard'"></user-card> 
<user-list-item [user]="user" *ngIf="role === 'UserListItem'"></user-list-item> 

jak my można zobaczyć tutaj dwa składniki: user-card i user-list-item. user-card zawiera bloki div, zawiera td bloków. I stół rozbił bo mam <user-list-item> blok wewnątrz i moja tabela wygląda następująco:

<table> 
    <tr> 
    <user-list-item> 
     <td></td> 
     <td></td> 
    </user-list-item> 
    </tr> 
</table> 

Jak mogę rozwiązać mój problem i dostać stolik w ten sposób?

<table> 
    <tr> 
    <td></td> 
    <td></td> 
    </tr> 
</table> 

UPD:

Moja user komponent:

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

znajdę swoje pytanie nieco mylące, ale myślę, że to, co chcesz to selektor atrybutu

@Component({ 
    selector: '[user-list-item]', 
    ... 
}) 
export class UserListItem { ... } 

i zamiast

<user-card [user]="user" *ngIf="role === 'UserCard'"></user-card> 
<user-list-item [user]="user" *ngIf="role === 'UserListItem'"></user-list-item> 

użycie

<td user-card [user]="user" *ngIf="role === 'UserCard'"></td> 
<td user-list-item [user]="user" *ngIf="role === 'UserListItem'"></td>