ngStyle 指令不适用于 ng-template

Question

我正在尝试使用 ngStyle 指令将自定义样式应用于 ng-template，我想制作一个滑块来显示使用 Angular 的 Swiper 的电影信息，如果我删除 ngStyle 指令Slider 工作，只有当我添加指令时 Slider 不工作。

slider.component.html:

    <swiper [config]="swiperConfig">
      <ng-template 
        swiperSlide 
        *ngFor="let movie of movieList | slice:0:10" 
        [ngStyle]="{
            'background-size': 'cover', 
            'background-image': 'url(https://image.tmdb.org/t/p/original' + movie.backdrop_path + ')'
        }">
        <div class="movie-description">
            <h3>{{ movie.title }}</h3>
            <p>
                {{ movie.overview }}
            </p>
        </div>
      </ng-template>
   </swiper>

slider.component.ts

import { Component, Input, OnInit } from '@angular/core';
import { Movie } from 'src/app/interfaces/movie-listings-response';
import  SwiperCore, { Navigation, SwiperOptions } from 'swiper';

SwiperCore.use([Navigation]);

@Component({
  selector: 'app-slider',
  templateUrl: './slider.component.html',
  styleUrls: ['./slider.component.css']
})
export class SliderComponent implements OnInit {

  @Input() movieList: Movie[] = [];
  baseURLImage: string = 'https://image.tmdb.org/t/p/original';
  
  swiperConfig: SwiperOptions = {
    slidesPerView: 1,
    spaceBetween: 20,
    navigation: true
  };

  constructor() { }

  ngOnInit(): void {
    console.log(this.movieList);
  }
}

components.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { NavbarComponent } from './navbar/navbar.component';
import { RouterModule } from '@angular/router';
import { SliderComponent } from './slider/slider.component';
import { SwiperModule } from 'swiper/angular';


@NgModule({
  declarations: [
    NavbarComponent,
    SliderComponent
  ],
  exports: [
      NavbarComponent,
      SliderComponent
  ],
  imports: [
      CommonModule,
      RouterModule,
      SwiperModule
  ],
})
export class ComponentsModule { }

工程编译成功，控制台浏览器显示错误信息： Console error

Answer 1

<ng-template> 标签最终没有被 angular 呈现为 HTML 标签。根据需要只使用标签内的内容。所以在 ng-template 标签上添加任何属性、样式都不会产生任何效果。

添加到 ng-template 中的某个元素，例如 div

Answer 2

<ng-template> 不会在 DOM 中呈现。它可以帮助我们使用结构指令 *ngIf、*ngFor 等和自定义指令。 <ng-container> 也一样。所以 ngStyle 不会在 <ng-template> 上工作你可以做的是将这些样式应用到 <ng-template> 内的 <div> 或者你可以添加另一个 <div> 其目的只是对于样式，例如：

    <swiper [config]="swiperConfig">
      <ng-template 
        swiperSlide 
        *ngFor="let movie of movieList | slice:0:10">
        <div 
          [ngStyle]="{ 'background-size': 'cover', 
         'background-image': 'url(https://image.tmdb.org/t/p/original' + movie.backdrop_path + ')'
        }">
           <div class="movie-description">
               <h3>{{ movie.title }}</h3>
               <p>
                   {{ movie.overview }}
               </p>
           </div>
        </div>
      </ng-template>
   </swiper>

ngStyle 指令不适用于 ng-template

ngStyle directive not works on ng-template

angular

typescript

swiper