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

【问题标题】：How do I get the value in ng-template(Angular 6)?如何获取 ng-template(Angular 6) 中的值？
【发布时间】：2018-07-23 17:31:27
【问题描述】：

<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”的值。我能做些什么呢？

【问题讨论】：

请说得清楚一点。您还应该告诉您如何激活这些ng-templates 以及设置为model2 的值是什么？

标签： angular angular6 ng-template

【解决方案1】：

我假设您正在从carouselProgress 激活carouselDot 模板。在carouselProgress 模板中添加另一个ng-content 并发送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>

查看here 以获得完整演示

【讨论】：