相关疑难解决方法(0)

我想ng-content在两个ngFor循环中显示两个不同的东西.但正如本回答所述,Angular不能多次投影ng-content.

我试过这个解决方案,但这不允许我多次投影我的内容,只是根据ngIf条件在不同的地方显示它.

这是我的实际代码:

示例父组件(使用app-table的任何组件).这就是我想要做的.

<app-table [data]="myData">
  <div lineHeader let-line>
    {{line.name}}
  </div>
  <div lineContent let-element>
    {{element.name}}
  </div>
</app-table>

子组件(app-table).在这里,我可以做任何事情,而父组件保持相同的工作方式.

<div *ngFor="let line of data">
  <ng-content select="[lineHeader]"></ng-content>
  <div *ngFor="let element of line">
    <ng-content select="[lineContent]"></ng-content>
  </div>
</div>

假设我有两个组成部分:parent和child.HTML将如下所示:

<parent title="Welcome">
    <child name="Chris">Blue Team</child>
    <child name="Tom">Red Team</child>
</parent>

最终输出如下:

<h1>Welcome</h2>
<ul>
    <li><b>Chris</b> is on the Blue Team</li>
    <li><b>Tom</b> is on the Red Team</li>
</ul>

父组件:

@Component({
  selector: 'parent',
  directives: [ChildComponent], // needed?
  template: `
    <h1>{{title}}</h1>
    <ul>
       <li *ngFor="#child of children()">{{child.content}}<li>
    </ul>`
})
export class ParentComponent {

    @Input() title;

    children() {
        // how?
    }

}

如何从父级中访问子组件并获取其内容？

此外,我不希望自动渲染孩子.根据某些条件,我可能会选择不显示某些孩子.

谢谢.

我有一个 Angular 2 组件（my-panel），它将使用 ng-content 显示提供的内容。我还想在扩展模式中显示相同的内容，但是似乎我只能在模板中引用 ng-content 一次。

是否可以在模板中多次引用面板内容，从而避免多次传递相同内容并需要使用带有 ng-content 的选择器专门引用每个内容？

提前致谢。

我的面板模板：

<div class="panel panel-default">
    <!-- non-expanded panel -->
    <div class="panel-body">
        <ng-content></ng-content>
    </div>

    <button data-toggle="modal" data-target="#myModal">Expand</button>

    <!-- Modal -->
    <div id="myModal" class="modal fade" role="dialog">
        <div class="modal-dialog">
            <!-- Modal content-->
            <div class="modal-content">
                <div class="modal-body">
                    <ng-content></ng-content>  <-- content not displayed
                </div>
            </div>
        </div>
    </div>
</div>

所需的我的面板用法：

<my-panel>
 <p>my panel content</p>
</my-panel>

放置<ng-content>在a中时<div *ngFor=...></div>,模板仅在for循环的最后一个元素内.它不会出现在所有迭代元素中.

在我的组件html - >

<ats-tab [tabOptions]="equipmentTabOptions">
    <ng-container class="tab-body">
        <p>para</p> //content to appear in all the tabs
    </ng-container>
</ats-tab>

在ats-tab.component.html - >中

<div class="tab-content">
    <div *ngFor="let item of tabOptions;" [attr.id]="item.id" class="tab-pane fade">
      <ng-content select=".tab-body"></ng-content>
    </div>
</div>

有人可以帮忙!:(

我知道有几个问题与此类似，但它们并不完全相同。我正在构建一个嵌套列表，我想在每个孙子中与常见 html 一起显示自定义 html 内容。当我在循环外部添加到 ListComponent 时，可以正常工作，但是如果我将其在循环内部传递给内部子级，则它不会像下面的示例那样工作。我在下面的代码中传递的 html 未显示。我可能试图以错误的方式解决这个问题，但我无法让它以我尝试的任何方式工作。你们中有人知道如何进行这项工作吗？

谢谢！

export class Model {\n  title: string;\n  children?: Model[] = [];\n}\n\n@Component({\n  selector: \'list\',\n  template: `\n<ul>\n  <li *ngFor="let item of items">\n    <list-item [item]="item">\n      <div main-content>\n        <ng-content select="[main-content]"></ng-content>\n      </div>\n    </list-item>\n    <list [items]="item.children"></list>\n  </li>\n</ul>\n`\n})\nexport class List {\n    @Input() items: Model[];\n}\n\n@Component({\n  selector: \'list-item\',\n  template: `\n<h1>{\xe2\x80\x8c{ item.title }}</h1>\n<div class="content">\n  <ng-content select="[main-content]"></ng-content>\n</div>\n`\n})\nexport class ListItem {\n  @Input() item: Model;\n}\n\n@Component({\n  selector: \'app-main\',\n  template: `\n    <list [items]="items">\n      <div main-content>\n        <h1>Test</h1>\n      </div>\n    </list>\n`\n})\nexport class AppMainComponent {\n}\n

经过大量测试并进一步检查提到的重复问题及其内部链接后，它并不能完全解决我的问题，因为模板我并没有尝试复制简单的内容。我正在尝试注入另一个包含其他常见 html …

这是stackblitz代码.

如你看到的

<div *ngFor="let number of numbers;let i = index">
        <div *ngIf="(number%2 !== 0);else even">
            <ul odd>{{number}}</ul>
        </div>
    <ng-template #even>
      <ul even>{{number}}</ul>
    </ng-template>    
</div>

我试图使用ng-content选择器渲染值,但它不在*ngFor循环内工作.为什么这样 ？如何使它工作？更喜欢这个img

我不想要两个ngFor循环,我希望它能与ng-content一起使用.