각도 4는 동적 선택을 사용하여 동적 ng 콘텐츠를 가질 수 있습니다.

Question

각도 4는 동적 ng 콘텐츠를 가질 수 있습니다. 난 그냥 원하는

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

: 일부는, 슬라이드 2를 정적 슬라이드 1을 제거 할 수있는 방법을 제공 할 수 있습니다 그것은 하위 구성 요소의 * ngFor

내용에 의해 구현 될 수 있도록 아래의 경우를 처리해야합니다.

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