angular - 如何获取 ng-template(Angular 6) 中的值？

Question

<ngx-hm-carousel [autoplay-speed]="5000" [autoplay]="true" [infinite]="true" [align]="left" [between-delay]="2000" class="carousel c-accent">

<section ngx-hm-carousel-container class="content">
    <article class="item cursor-pointer" *ngFor="let item of data" ngx-hm-carousel-item>
        <div class="img" [style.backgroundImage]="'url('+item.url+')'">
        </div>
    </article>
</section>

<ng-template #carouselDot let-model>
    <div class="ball bg-accent" [class.visible]="model.index === model.currentIndex"></div>

    <div class="my-progress">
        {{model2.progress}} //***undefined***
    </div>
</ng-template>

<ng-template #carouselProgress let-model2>
    <div class="progress" [style.width]="model2.progress + '%'"></div>
</ng-template>

嗨，大家好，

我无法从外部获取“#carouselProgress”中“model2.progress”的值。我能为它做些什么？

Answer 1

我假设您正在carouselDot从carouselProgress. 添加另一个ng-content内部carouselProgress模板并发送值，model2如图所示

<ng-template #carouselProgress let-model2="mod">
    {{model2}} --- Template 1
    -- Activates carouselDot ng template  with model2 data
    <ng-container *ngTemplateOutlet="carouselDot; context:{model :model2}"></ng-container>
</ng-template>

并且carouselDot会接收model2到发送的数据carouselProgress

<ng-template #carouselDot let-model2="model">    
    <div class="my-progress">
        {{model2}} --- Template 2
    </div>
</ng-template>

在这里查看完整的演示