英文:
how to use ng-content multiple in same component
问题
如何在同一个组件中多次使用 ng-content？我目前已成功地将其用于开始时间，但当我添加结束时间时，开始时间的值也被传递到结束时间的值。你能帮我解决这个问题吗？
这是我的主组件：
<div class="p-float-label">
<p-calendar [(ngModel)]="startTimeAsDate" formControlName="startTime"
[inputId]="'startTime_' + day + '_' + inputIndex" (ngModelChange)="checkStartTimeValidity()" [showTime]="true"
[timeOnly]="true"><p-footer><ng-content select="[id=startTime]"></ng-content></p-footer></p-calendar>
<label [for]="'startTime' + inputIndex">{{ 'startTime' | translate }}</label>
</div>
<div class="p-float-label">
<p-calendar [(ngModel)]="endTimeAsDate" formControlName="endTime" [inputId]="'endTime_' + day + '_' + inputIndex"
(ngModelChange)="checkEndTimeValidity()" [showTime]="true" [timeOnly]="true"><p-footer><ng-content
select="[id=endTime]"></ng-content></p-footer></p-calendar>
<label [for]="'endTime' + inputIndex">{{ 'endTime' | translate }}</label>
</div>
这是我的第二个组件：
<app-start-time-end-time [footer]="footer" [day]="day" [inputIndex]="i"
[isMinusButtonVisible]="plusMinusButtonVisibilities[i].isMinusButtonVisible"
[isPlusButtonVisible]="plusMinusButtonVisibilities[i].isPlusButtonVisible"
(minusButtonClicked)="removeTimeValueFromArray($event)" (plusButtonClicked)="addNewTimeValueToArray()"
[(endTime)]="timeValues[i].endTime!" [(startTime)]="timeValues[i].startTime!">
<span id="startTime"><ng-content></ng-content></span>
<span id="endTime"><ng-content></ng-content></span>
</app-start-time-end-time>
这是我的第三个组件：
<app-week-day-time [footer]="getFooterContent()" [(timeValues)]="mondayTimeValues"
[dayCheckboxLabel]="translate('offDay')" [day]="'monday'">
<span id="startTime" class="clickToApllyStart clickable clickable cursor-pointer text-blue-500 w-3 pl-3"
(click)="onApplyToAllStartTimesClicked(mondayTimeValues[0].startTime, 0)">Apply to All Start Times</span>
</app-week-day-time>
我尝试在同一个组件中多次使用 ng-content。我希望分别为结束时间和开始时间添加不同的值，但目前开始时间的值也传递到结束时间。如何确保每个 ng-content 区块都有自己独立的 startTime 和 endTime 值？
英文:
How can I use ng-content multiple times in the same component? I'm currently using it successfully for the start time, but when I add the end time, the start time values are being passed to the end time values. Can you help me fix this?
this is my main component
` <div class="p-float-label">
<p-calendar [(ngModel)]="startTimeAsDate" formControlName="startTime"
[inputId]="'startTime_'+day+'_' + inputIndex" (ngModelChange)="checkStartTimeValidity()" [showTime]="true"
[timeOnly]="true"><p-footer><ng-content select="[id=startTime]"></ng-content></p-footer></p-calendar>
<label [for]="'startTime' + inputIndex">{{'startTime' | translate}}</label>
</div>
<div class="p-float-label">
<p-calendar [(ngModel)]="endTimeAsDate" formControlName="endTime" [inputId]="'endTime_'+day+'_' + inputIndex"
(ngModelChange)="checkEndTimeValidity()" [showTime]="true" [timeOnly]="true"><p-footer><ng-content
select="[id=endTime]"></ng-content></p-footer></p-calendar>
<label [for]="'endTime' + inputIndex">{{'endTime' | translate}}</label>
</div>
`
this is my second component
` <app-start-time-end-time [footer]="footer" [day]="day" [inputIndex]="i"
[isMinusButtonVisible]="plusMinusButtonVisibilities[i].isMinusButtonVisible"
[isPlusButtonVisible]="plusMinusButtonVisibilities[i].isPlusButtonVisible"
(minusButtonClicked)="removeTimeValueFromArray($event)" (plusButtonClicked)="addNewTimeValueToArray()"
[(endTime)]="timeValues[i].endTime!" [(startTime)]="timeValues[i].startTime!">
<span id="startTime"><ng-content></ng-content></span>
<span id="endTime"><ng-content></ng-content></span>
</app-start-time-end-time>`
this is my third component
`<app-week-day-time [footer]="getFooterContent()" [(timeValues)]="mondayTimeValues"
[dayCheckboxLabel]="translate('offDay')" [day]="'monday'"> <span id="startTime"
class="clickToApllyStart clickable clickable cursor-pointer text-blue-500 w-3 pl-3" (click)="
onApplyToAllStartTimesClicked(mondayTimeValues[0].startTime, 0)
">Apply to All Start Times</span>
</app-week-day-time>`
I'm trying to use ng-content multiple times in the same component. I want to add different values for the end time and start time separately, but currently, the values of the start time are being passed to the end time as well. How can I ensure that each ng-content block has its own separate values for startTime and endTime?
答案1
得分: 0
ng-content 可以用于多槽内容投影。为此，您需要向<ng-content>元素添加一个select属性。
<ng-content select="[question]"></ng-content>
其中select值是一个CSS选择器。
英文:
ng-content can be used for multi-slot content projection. For this you'll need to add a select attribute to the <ng-content> elements.
<ng-content select="[question]"></ng-content>
Where the select value is a css selector.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论