Question

我对angular2有疑问。我正在创建一些组件，并希望有这样的东西：

这是我的DogComponent类：

@Component({
    selector: "dog",
    template: "dog.template.html"
})
class DogComponent
{
    @Input() image: string;
}

dog.template.html中的模板：

<div>
    <!-- Content of <top> should go here -->
    <img class="after" src="dogs/{{image}}" />
    <!-- Content of <bottom> should go here -->
</div>

当我使用DogComponent时，它应该使用传递的src创建img-tag，但也可以在图像之前和之后查看其他HTML部分。

所以最后，如果我写这段代码：

<dog image="garry.png">
    <top>
        <h1>This is Garry!</h1>
    </top>
    <bottom>
        <span>He is my favorite dog!</span>
    </bottom>
</dog>

它应该呈现给：

<dog>
    <div>
        <h1>This is Garry!</h1>
        <img src="dog.png" />
        <span>He is my favorite dog!</span>
    </div>
</dog>

有人能回答我的问题吗？

太棒了！

修改

感谢您的建议，所以现在我更新了我的代码段并添加了DogListComponent。如果我在应用程序的某处使用标记dog-list，则应查看最后一个片段（浏览器结果）。希望现在有点清楚。

dog.component.ts

@Component({
    selector: "dog",
    templateUrl: "dog.template.html"
})
class DogComponent
{
    @Input() image: string;
}

dog.template.html

<div>
    <!-- Content of <top> should go here -->
    <img class="after" src="dogs/{{image}}" />
    <!-- Content of <bottom> should go here -->
</div>

dog_list.component.ts

@Component({
    selector: "dog-list",
    templateUrl: "dog-list.template.html"
})
class DogListComponent
{
}

狗list.template.html

<dog image="garry.png">
    <top>
        <h1>This is Garry!</h1>
    </top>
    <bottom>
        <span>He is my favorite dog!</span>
    </bottom>
</dog>
<dog image="linda.png">
    <top>
        <h1>My little Linda :)</h1>
    </top>
    <bottom>
        <span>She is my cutest dog!</span>
    </bottom>
</dog>
<dog image="rex.png">
    <top>
        <h1>And here is Rex!</h1>
    </top>
    <bottom>
        <span>DANGEROUS!</span>
    </bottom>
</dog>

浏览器结果：

<dog-list>
    <dog image="garry.png">
        <top>
            <h1>This is Garry!</h1>
        </top>
        <bottom>
            <span>He is my favorite dog!</span>
        </bottom>
    </dog>

    <dog image="linda.png">
        <top>
            <h1>My little Linda :)</h1>
        </top>
        <bottom>
            <span>She is my cutest dog!</span>
        </bottom>
    </dog>

    <dog image="rex.png">
        <top>
            <h1>And here is Rex!</h1>
        </top>
        <bottom>
            <span>DANGEROUS!</span>
        </bottom>
    </dog>
<dog-list>

Answer 1

所以我找到了解决方案！我需要使用<ng-content>。

dog.template.html看起来像这样：

<div>
    <ng-content select="top"></ng-content>
    <img class="after" src="dogs/{{image}}" />
    <ng-content select="bottom"></ng-content>
</div>

然后它会在我的div中插入指定的<top>-tags和<bottom>-tags。

Answer 2

看起来你误解了选择角色。选择器<dog></dog>将被其他组件（例如AppComponent）用于显示您的dog组件HTML。因此，没有必要在他自己的组件HTML中使用选择器。

此外，如果要将外部文件用作模板，则语法为templateUrl而不是template。所以：

@Component({
selector: "dog",
templateUrl: "dog.template.html" // make sure the path to the file is correct

在dog.template.html中，只需输入您的HTML代码：

<div>
    <h1>This is Garry!</h1>
    <img src="dogs/{{image}}" /> 
    <!-- the component deliver the value image (dog.png) to your template -->
    <span>He is my favorite dog!</span>
</div>

修改以回复您的更新代码。如果我理解得很清楚，您可以从pictures访问一系列dog_list.component.ts狗。您可以在模板中使用*ngFor="let picture of pictures"之类的内容。您没有说明您的数据是什么样的，但如果您的数组格式为arr = [{'topTile':'This is Garry!', 'picture': 'garry.png', 'bottomTitle':'He is my favorite dog!' }, {}, ...]

，则可以试试这个

 <!-- Parent component template (dog_list) --> 
   <div *ngFor="let data of arr">
        <top>
            <h1>{{ data.topTitle }}</h1> <!-- This is Garry!, ... -->
        </top>
        <dog [image]="data.picture"></dog><!-- Bind data to children component dog with value garry.png -->
        <bottom>
            <span>{{ data.bottomTitle }}</span> <!-- He is my favorite dog!,... -->
        </bottom> 
    </div>

有关更多详细信息，可能有角度模板语法文档可能会有所帮助： https://angular.io/docs/ts/latest/guide/template-syntax.html

Angular2：如何在组件内部显示组件标签的内部HTML？

2 个答案: