在 angular 2 中使用组件模板的内容 [英] Use content of component template in angular 2

问题描述

RE DUPLICATE:这个问题以前有人问过，已经有了答案."

所以这个问题是在我问它10天后问的?有人不知道如何读取时间戳.

<小时>

我正在为 Angular 2 苦苦挣扎，这使得在 Angular 1 中做一些微不足道的事情变得困难或不可能，尤其是没有大量多余的代码和/或 DOM 节点.:(

在 Angular 1 中，我有一个查询控件，它对输入框中的击键进行复杂的处理，并在下拉列表中动态显示结果.被搜索的项目可以是任何类型，下拉列表项目可以是简单的字符串或复杂的内联模板.

例如，我可能会使用它查询用户对象列表并使用默认模板(例如 toString)显示它们:

 </搜索框>

我在其他地方也有类似的搜索，但我希望结果列表包含每个用户的更丰富的视图，所以我提供了一个内联模板，作为搜索框的子项:

 <!-- 用作每个结果项的模板下拉列表，result"绑定到结果项.--><div><span class='userName'>result.name</span><span class='userAge'>result.age</span><address [model]='result.address'><address>

</搜索框>

我的搜索框实现需要确定是否有任何子内容用作模板，并在搜索框模板中的正确位置使用它.

@Component({选择:搜索框"，模板:`<div 一些东西在这里><在这里输入更多的东西><ul 这是我的下拉项目所在的位置><li *ng-for="#item of model.listItems"项目模板应该放在这里

`...

使用 Angular 1，我可以轻松地将子模板嵌入到该位置并将其绑定到适当的范围，或者我可以动态编译模板.我根本无法在 Angular 2 中使用它.

如果我在那里使用 ，它只会出现在第一个

中.

解决方案

您可以使用 ngForTemplate 轻松完成此操作，这是我对类似问题的详细回答 Angular2 中列表组件的自定义模板(不带 ng-content 的嵌入)

https://stackoverflow.com/a/36535521/306753

RE DUPLICATE: "This question has been asked before and already has an answer. "

So this question was asked 10 days after I asked it? Somebody doesn't know how to read time stamps.

---

I'm struggling with Angular 2 making it hard or perhaps impossible to do things that were trivial in Angular 1, especially without tons of superfluous code and/or DOM nodes. :(

In Angular 1 I had a query control that did sophisticated handling of keystrokes in an input box and dynamically displayed results in a dropdown list. The items being searched could be of any type, and the dropdown list items could be simple strings or complex inline templates.

For example, I might use it query a list of User objects and display them using a default template (e.g. toString):

  <search-box [query-provider]='userFinder'> </search-box>

Somewhere else I have a similar search, but I want the resulting list to contain a richer view of each user, so I provide a template inline, as a child of the search-box:

  <search-box [query-provider]='userFinder'>
       <!-- this is used as a template for each result item in the
            dropdown list, with `result` bound to the result item. -->
       <div>
            <span class='userName'>result.name</span>
            <span class='userAge'>result.age</span>
            <address [model]='result.address'><address>
       </div>
  </search-box>

My implementation of search-box needs to determine if there is any child content to use as a template and use it in the correct location in the search-box template.

@Component({
    select: 'search-box',
    template: `
        <div somestuff here>
            <input morestuff here>
            <ul this is where my dropdown items will go>
                <li *ng-for="#item of model.listItems"
                    TEMPLATE FOR ITEMS SHOULD GO HERE
                </li>
            </ul>
        </div>`
    ...

With Angular 1 I could easily transclude a child template to that location and bind it to the appropriate scope, or I could dynamically compiled a template. I can't get this to work in Angular 2 at all.

If I use <ng-content> there, it only appears in the first <li>.

解决方案

You can do this easily with ngForTemplate, here is my detailed answer for a similar question Custom template(transclusion without ng-content) for list component in Angular2

https://stackoverflow.com/a/36535521/306753

这篇关于在 angular 2 中使用组件模板的内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！