如何获取 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

我假设您正在从 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 以获取完整演示

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

How do I get the value in ng-template(Angular 6)?

ng-template

angular

angular6