[英]Angular Component Dynamic Compile - ng-content with select not working
[英]Can Angular 4 have dynamic ng-content with dynamic select
角度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>
對不起,你想要什么?
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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.