将组件的模板放入另一个组件的模板中

Question

我正在尝试在angular 2 中为此html 创建组件

<div class="tab-content">
    <div class="tab-pane fade in active" id="playerCard" role="tabpanel" aria-labelledby="playerCard-tab">
        <div class="card">
            <div class="card-block">
                <h4 class="card-title text-muted">UltimateWarrior15</h4>
                <h6 class="card-subtitle text-muted">
                    Adventurer card
                </h6>
            </div>
            <img data-src="holder.js/100px180/?text=Image">
            <div class="card-block">
                <div class="form-group row">
                    <label class="col-xs-2 col-form-label">Rank</label>
                    <div class="col-xs-10">
                        <label class="form-control text-muted">D</label>
                    </div>
                </div>
                <div class="form-group row">
                    <label class="col-xs-2 col-form-label">Age</label>
                    <div class="col-xs-10">
                        <label class="form-control text-muted">15</label>
                    </div>
                </div>
                <div class="form-group row">
                    <label class="col-xs-2 col-form-label">Gender</label>
                    <div class="col-xs-10">
                        <label class="form-control text-muted">Male</label>
                    </div>
                </div>
                <div class="form-group row">
                    <label class="col-xs-2 col-form-label">Race</label>
                    <div class="col-xs-10">
                        <label class="form-control text-muted">Human</label>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

我创建了player-record 组件

import { Component } from '@angular/core';

@Component({
    moduleId: module.id,
    selector: 'player-record',
    templateUrl: 'player-record.component.html'
})
export class PlayerRecord {
    label: string;
    value: string
}

及其html 模板

<div class="form-group row">
    <label class="col-xs-2 col-form-label">{{label}}</label>
    <div class="col-xs-10">
        <label class="form-control text-muted">{{value}}</label>
    </div>
</div>

然后我创建了player-card 组件

import { Component } from '@angular/core';

import { Player } from './player';

const CONTENT_CARD_META = {
    "rank": "Rank",
    "age": "Age",
    "gender": "Gender",
    "race": "Race"
};

@Component({
    moduleId: module.id,
    selector: 'player-card',
    templateUrl: 'player-card.component.html'
})
export class PlayerCard {
    player: Player;
}

它的html 模板看起来像这样

<div class="tab-pane fade in active" id="playerCard" role="tabpanel" aria-labelledby="playerCard-tab">
    <div class="card">
        <div class="card-block">
            <h4 class="card-title text-muted">{{player.name}}</h4>
            <h6 class="card-subtitle text-muted">
                Adventurer card
            </h6>
        </div>
        <img data-src="holder.js/100px180/?text=Image">
        <div class="card-block">
            <!-- pseudo code
                    CONTENT_CARD_META.foreach { field, label ->
                        new PlayerRecord(label, player[field]).html
                    }
            -->
        </div>
    </div>
</div>

Player 只是我打算用服务调用替换的某种存根类。

export class Player {
    id: string;
    rank: string;
    age: number;
    gender: string;
    race: string;
}

但是如何遍历CONTENT_CARD_META，通过key从player对象中获取属性以及player-record组件的添加标记与player-card模板内的数据？

我用伪代码制作的示例流程

<!-- pseudo code
        CONTENT_CARD_META.foreach { field, label ->
            new PlayerRecord(label, player[field]).html
        }
-->

Answer 1

试试这个：

<div class="tab-pane fade in active" id="playerCard" role="tabpanel" aria-labelledby="playerCard-tab">
<div class="card">
    <div class="card-block">
        <h4 class="card-title text-muted">{{player.name}}</h4>
        <h6 class="card-subtitle text-muted">
            Adventurer card
        </h6>
    </div>
    <img data-src="holder.js/100px180/?text=Image">
    <div class="card-block">
        <div class="form-group row" *ngFor="let playerAttributeKey of Object.keys(CONTENT_CARD_META)"

          <label class="col-xs-2 col-form-label">{{CONTENT_CARD_META[playerAttributeKey]}}</label>
                <div class="col-xs-10">
                    <label class="form-control text-muted">{{player[playerAttributeKey]}}</label>
                </div>

      </div>
    </div>
</div>

或者如果您需要保留顺序（尽管确实超出了这个问题的范围）...将 CONTENT_CARD_META 更改为：

const CONTENT_CARD_META = [
    {"key": "rank", "display" "Rank"},
    {"key": "age", "display" "Age"},
    {"key": "gender", "display" "Gender"},
    {"key": "race", "display" "Race"}
];

...和...

<div class="tab-pane fade in active" id="playerCard" role="tabpanel" aria-labelledby="playerCard-tab">
<div class="card">
    <div class="card-block">
        <h4 class="card-title text-muted">{{player.name}}</h4>
        <h6 class="card-subtitle text-muted">
            Adventurer card
        </h6>
    </div>
    <img data-src="holder.js/100px180/?text=Image">
    <div class="card-block">
        <div class="form-group row" *ngFor="let playerAttribute of CONTENT_CARD_META"

          <label class="col-xs-2 col-form-label">{{playerAttribute.display]}}</label>
                <div class="col-xs-10">
                    <label class="form-control text-muted">{{player[playerAttribute.key ]}}</label>
                </div>

      </div>
    </div>
</div>