Question

我想为组件制作一个ng-content模板。但我找不到如何解决这个问题的教程。

我希望我的视图中的语法如下所示：

<slider>
    <img src="url" alt="alt">
    <img src="url" alt="alt">
</slider>

我的Slider组件：

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

@Component({
    selector: 'flx-slider',
    template: `
        <section class="slider">
            <div class="slider-inner">

                <ul>
                    <li>
                        <ng-content select="img"></ng-content>
                    </li>
                </ul>

            </div>
        </section>
    `,
    styleUrls: ['./module.flx-slider.component.scss'],
    encapsulation: ViewEncapsulation.None
})

export class FlxSliderComponent {

    constructor() {

    }

}

我想所有人都看到了这个问题。最后一定是这样，它会为img周围的每li个额外img创建。任何人都可以告诉我，我该怎么做？

Answer 1

更新Angular 5

ngOutletContext已重命名为ngTemplateOutletContext

另见https://github.com/angular/angular/blob/master/CHANGELOG.md#500-beta5-2017-08-29

<强>原始

您可以将<template>与<template [ngTemplateOutlet]="...">

一起使用

<slider [data]="['url1', 'url2']">
  <template let-data><img [src]="data" alt="alt"></template>
</slider>

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

@Component({
    selector: 'flx-slider',
    template: `
        <section class="slider">
          <div class="slider-inner">
            <ul>
              <li *ngFor="let item of data">
                <template [ngTemplateOutlet]="templateRef" [ngOutletContext]="{$implicit: item}"></template>
              </li>
            </ul>
          </div>
        </section>
    `,
    styleUrls: ['./module.flx-slider.component.scss'],
    encapsulation: ViewEncapsulation.None
})

export class FlxSliderComponent {
    @ContentChild(TemplateRef) templateRef:TemplateRef;
    @Input()
    data:<any>[];
}

未经过测试

另见

Answer 2

您应该使用两个组件。一个用于迭代图像，另一个用作滑块。

您的最终实现代码应如下所示：

<slider>
    <image-list [data]="['url1', 'url2']"></image-list>
</slider>

滑块模板：

<section class="slider">
    <div class="slider-inner">
        <ng-content></ng-content>
    </div>
</section>

列表模板：

<ul>
    <li *ngFor="let item of data">
        <img [src]="item.url">
    </li>
</ul>

扩展内容转换

2 个答案: