Question

角度4可以具有动态ng内容。有些人可以提供一种方法来删除静态slide1，slide2，以便它可以通过* ngFor

实现

子组件的内容：

<ion-slides [pager]="true" #Slides (ionSlideDidChange)="onSlideChanged()">
<ion-slide class="slide1">
  <ng-container  *ngIf="!isMenuOpen">
     <ng-container *ngTemplateOutlet="slide1"></ng-container>  
  </ng-container>
</ion-slide>
<ion-slide class="slide2">
    <ng-container  *ngIf="!isMenuOpen">
       <ng-container *ngTemplateOutlet="slide2"></ng-container>
    </ng-container>
</ion-slide>
</ion-slides>
<ng-container *ngIf="isMenuOpen">
    <div class="sidemenu-open-slide slide1" *ngIf="isMenuOpen && slideActiveIndex==0">
       <ng-container *ngTemplateOutlet="slide1"></ng-container>
    </div>
    <div class="sidemenu-open-slide slide2" *ngIf="isMenuOpen && slideActiveIndex==1">
       <ng-container *ngTemplateOutlet="slide2"></ng-container>
    </div>
    <div class="side-menu-slider-pagination">
       <button class="swiper-pagination-bullet" *ngFor="let page of [0,1]" style="margin: 0 5px;" [ngClass]="{'swiper-pagination-bullet-active':slideActiveIndex==page}"></button>
    </div>
</ng-container>
<ng-template #slide1>
   <ng-content select="[slide1]"></ng-content>
</ng-template>
<ng-template #slide2>
   <ng-content select="[slide2]"></ng-content>
</ng-template>

在我的父组件

中

 <customslider slides="2">
    <div slide1>

    </div>
    <div slide2>

    </div>
 </customslider>

我只想要处理下面的案例

<customslider slides="N">
    <div slide1>

    </div>
    <div slide2>

    </div>
    <div slideN>
        nth slide
    </div>
 </customslider>

Answer 1

对不起，你想要类似的东西吗？

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

@Component({
  selector: 'app-div-for',
  template:`
  <div *ngFor="let i of items" [ngClass]="'slide'+i">
  div-for works!
</div>`,
  styleUrls: ['./div-for.component.css']
})
export class DivForComponent implements OnInit {

  items:any[];
  @Input('cont') set cont(value:number){ //get input to fill "items"
    console.log(value);
    this.items=[];
    for (let i=0;i<value;i++)
       this.items.push(i);
  }
  constructor() { }
  ngOnInit() {}
}

在您使用的另一个组件中，例如

<app-div-for [cont]="5"></app-div-for>

Angular 4可以动态选择动态ng内容

1 个答案: