javascript 相关问题

我正在使用自定义角度组件，我需要将投影内容显示两次。假设我有这个 html：我正在使用自定义角度组件，我需要将投影内容显示两次。假设我有这个 html： <app-awesome> <app-awesome-card *ngFor="let card of cards"> <h1>{{card.title}}</h1> <img [src]="card.thumbnail"> </app-awesome-card> </app-awesome> 所以，在awesome-card.component.html中，投影的内容将是一些我想投影两次的卡片组件。可能是这样的： <div class="awesome-class"> <ng-content select="app-awesome-card"></ng-content> </div> <div class="more-awesome-class"> <ng-content select="app-awesome-card"></ng-content> </div> 但这不起作用，因为 ng-content 只是“粘贴”模板，无法复制。即使我像这样使用 ng-template: <div class="awesome-class"> <ng-container *ngTemplateOutlet="content"></ng-container> </div> <div class="more-awesome-class"> <ng-container *ngTemplateOutlet="content"></ng-container> </div> <ng-template #content> <ng-content select="app-awesome-card"></ng-content> </ng-template> 这也行不通。我花了一周时间试图找到一个优雅的解决方案，但我找不到。只直接修改 DOM，但这是一个不好的做法。我见过一些类似的老问题，甚至有一个 Github 请求这个问题，但似乎当时没有人知道答案。 PD： ContentChild 也不会工作，因为它无法看穿投影内容（或我相信的东西）编辑如果我可以访问投影的内容信息，我可以手动渲染内容，但我尝试的一切都失败了我能提供的是传递一个模板而不是传递一段html <app-awesome> <ng-template> // or your own helper structural directive can be used. <app-awesome-card *ngFor="let card of cards"> <h1>{{card.title}}</h1> <img [src]="card.thumbnail"> </app-awesome-card> </ng-template> </app-awesome> @ContentChild(TemplateRef) contentTpl; ... <div class="awesome-class"> <ng-container *ngTemplateOutlet="contentTpl"></ng-container> </div> <div class="more-awesome-class"> <ng-container *ngTemplateOutlet="contentTpl"></ng-container> </div> 就我而言，我正在改造现有组件，并发现尝试根据视口选择不同输出并处理ng-content投影出最后一次出现的问题。 <div class="mobile"> ... <ng-content></ng-content>  </div> <div class="desktop"> ... <ng-content></ng-content>  </div> 要修复，我将最后/第二次出现替换为： <ng-container *ngTemplateOutlet="contentTemplate"></ng-container> 并在其后面添加了代码： @ContentChild(TemplateRef) contentTemplate: TemplateRef<any>; 同样，必须用 ng-template 将调用者中的内容包裹起来，例如： <app-custom-thing class="some-class"> <ng-template> Your content here! </ng-template> </app-custom-thing> 这具有允许先前使用而不用 ng-template 进行包装的效果，以继续像以前一样工作，而未来需要 ng-template 的使用将按预期呈现。好奇其他人是否有意见或替代方法来实施。谢谢！您需要一个 .上课前点 <ng-template #content> <ng-content select=".app-awesome-card"></ng-content> </ng-template>

javascript html angular typescript

回答 3 投票 0

更改样式表内由 data-URL 加载的 SVG 图像的填充颜色

我想要通过 url('data...') 属性将不同颜色的图像加载到样式表内。所有图像都嵌入在 css 文件中。唯一的区别是填充颜色

javascript html css svg

回答 4 投票 0

javascript 相关问题

最新问题