角4は動的選択で動的な内容を持つことができます

Question

角度4は動的な内容を持つことができます。私はちょうどたい

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

    </div> 
    <div slide2> 

    </div> 
</customslider> 

私の親コンポーネントで

<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> 

：いくつかは、slide2を静的slide1を削除する方法を提供することができ、それは、子コンポーネントの* ngFor

コンテンツで実現することができるように、下のケースを処理する必要があります

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

    </div> 
    <div slide2> 

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

Answer 1

申し訳ありません、あなたは何かをしたいe？

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>