angular2 bileşenini çıkarma etiketi

Question

2 şablon için bir kullanıcı bileşenim var. Kullanıcı sayfası için ilk şablon, bir kullanıcı sayfası için ikinci. role özniteliği tarafından kullanılacak şablonu seçerim. kullanmanın

İlk örnek: Başka bir şablonunda

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

Bu gibi benim bileşeni kullanmak:

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

Yani, benim user bileşeni şablonu: biz gibi

// user.template.html 

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

Burada, iki bileşen user-card ve user-list-item görülebilir. user-card, div bloklarını içerir, user-list-item, td bloklarını içerir.

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

nasıl sorunu çözmek ve bunun gibi bir tablo elde edebilirsiniz: Ve tablo içimde bir <user-list-item> blok var ve benim tablo gibi görünüyor çünkü çöktü?

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

UPD:

Benim user bileşen:

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

Ben biraz kafa karıştırıcı soru bulmak ama istediğini tahmin özellik seçici

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

ve yerine ise

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

kullanım

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