components 相关问题

如何将 Blazor 组件实例传递给其他组件并渲染它？

我的应用程序中有一种工厂，我在其中创建各种对象的实例。所有对象都继承自同一个基类。 我现在尝试将此推导的实例传递到

添加和删除动态组件Angular

我在 Angular 12 中有这段代码，它运行得很好。当版本从 12 更改为 16 时，问题就出现了。 进口 { 组件参考， 组件工厂解析器， 查看容器参考， 查看Chil...

如何基于@heroicons为组件库创建Icon组件？

我想创建一个可以用作 并基于 @heroicons https://github.com/tailwindlabs/heroicons 库。 我...

是否可以在ngIf内部定义分页器？

我有一个按钮，单击它时，会打开搜索和表格。它在一个组件中，是否可以在 ngIf 内定义分页器？ 我有一个按钮，单击它时，将打开搜索和表格。它在一个组件中，是否可以在 ngIf 中定义分页器？ <div style="text-align: right;" *ngIf="showDokumendiLisaDokiNupp; else dokumendiLisamineContainer"> <span *ngIf="isDokumendiMuutmineKasutajaleLubatud; else notAllowed" class="lisa-nupp" (click)="openDokumendiLisamine()"> + Lisa dokument</span> <ng-template #notAllowed> <span class="not-allowed" matTooltip="Õigus puudub" matTooltipPosition="above">+ Lisa dokument</span> </ng-template> </div> <ng-template #dokumendiLisamineContainer> <div class="container-fluid" style="background-color: rgb(248, 251, 251);"> 分页器位于页脚中 <mat-paginator [pageSizeOptions]="pageSizeOptions" [pageSize]="defaultPageSize" (page)="onPageChange($event)"> </mat-paginator> 在 .ts 文件中我这样声明： @ViewChild(MatPaginator) paginator: MatPaginator; 它总是未定义的。在 if 语句中 您可以在页脚中使用隐藏属性。 示例： <div [hidden]="!showDokumendiLisaDokiNupp"> <mat-paginator [pageSizeOptions]="pageSizeOptions" [pageSize]="defaultPageSize" (page)="onPageChange($event)"> </mat-paginator> </div>

app.routes 无法识别我在 Angular 中的组件

我是 Angular 的新手，在学习完教程后，我决定进行一些实验。今天，我遇到了这个问题： TS2305：模块“”./components/required-input/required-input。

为什么我的删除动画在删除前不播放

从“vue”导入{计算、引用、监视}； const emmit = DefineEmits(["删除待办事项", "编辑待办事项"]); const props = DefineProps({ 成功：{ ...</desc> <question vote="0"> <pre><code>&lt;script setup&gt; import { computed, ref, watch } from &#34;vue&#34;; const emit = defineEmits([&#34;delete-todo&#34;, &#34;edit-todo&#34;]); const props = defineProps({ isSuccess: { type: Boolean, default: false, }, description: { type: String, default: &#34;Nothing&#34;, }, id: { type: Number, default: undefined, }, }); const isDelete = ref(false); const description = computed(() =&gt; { return props.description; }); const checkBox = computed(() =&gt; { return props.isSuccess; }); const id = computed(() =&gt; { return props.id; }); async function handleDelete(event) { isDelete.value = true; emit(&#34;delete-todo&#34;, props.id, event.target); } function handleTest() { isDelete.value = true; } watch(isDelete, (newvalue) =&gt; { console.log(newvalue); }); &lt;/script&gt; &lt;template&gt; &lt;div class=&#34;flex row rounded w-full gap-3 bg-blue-200 p-5&#34; :class=&#34;{ del: isDelete }&#34; &gt; {{ id }} {{ isDelete }} &lt;input type=&#34;checkbox&#34; class=&#34;checkbox my-auto&#34; /&gt; &lt;p class=&#34;w-1/2&#34;&gt;{{ description }}&lt;/p&gt; &lt;button class=&#34;btn btn-error&#34; @click=&#34;handleDelete&#34;&gt;Delete&lt;/button&gt; &lt;button class=&#34;btn&#34;&gt;Edit&lt;/button&gt; &lt;button @click=&#34;handleTest&#34; class=&#34;btn&#34;&gt;Test&lt;/button&gt; &lt;/div&gt; &lt;/template&gt; &lt;style&gt; @keyframes deletionAnimation { from { opacity: 1; } to { opacity: 0; left: 500px; } } /* Apply animation to .del class */ .del { animation: deletionAnimation 2s ease-in-out; } &lt;/style&gt; </code></pre> <p>我一直致力于实现单击删除按钮时播放的动画，然后重新计算组件。但是，我遇到了一个问题，在删除发生之前动画似乎没有触发。我尝试过使用类来处理此功能，但到目前为止，我尚未成功解决该问题。</p> <p>单击删除按钮后，所需的行为是首先播放动画以向用户提供视觉反馈，表明删除过程已启动。在此动画之后，组件应重新计算以反映删除后所做的更改。然而，当前的实现未能实现所需的一系列操作。</p> <p>一个潜在的问题可能在于事件的顺序或代码中动画的触发方式。确保在删除过程开始之前触发动画至关重要。这可能涉及重新访问负责处理删除操作的代码，并确保在执行任何与删除相关的函数之前显式触发动画。</p> <p>顺风CSS Vue vite模板</p> </question> <answer tick="false" vote="0"> <p>我不是vue专家，但在这个功能上</p> <pre><code>async function handleDelete(event) { isDelete.value = true; emit(&#34;delete-todo&#34;, props.id, event.target); } </code></pre> <p>您设置 <pre><code>isDelete</code></pre> 并在此之后立即调用 <pre><code>emit</code></pre>，而不允许动画完成，这将需要 CSS 中指定的 2 秒。</p> <p>您可以在实际删除该项目之前应用延迟，从而允许动画完成。</p> <p>例如，像这样：</p> <pre><code>async function handleDelete(event) { isDelete.value = true; setTimeout(() =&gt; emit(&#34;delete-todo&#34;, props.id, event.target), 2000); } </code></pre> <p>抱歉，我现在无法测试此代码，但我认为它应该可以工作。 如果这有帮助，请告诉我。</p> </answer> </body></html>

AEM 6.2（将组件拖动到此处）Parsys 高度 0px

我正在使用 AEM 6.2 并尝试使用下面的代码在 crx 中创建 parsys 组件 然而，在编辑模式下，该 parsys 的高度为 0px。 附上截图。 当我

如何解决vs code中的这个角度误差

应用程序包生成失败。 [0.966 秒] X [错误] NG8001：“app-todos”不是已知元素： 如果“app-todos”是 Angular 组件，则验证它是否包含在“@Component”中。

svelte 的 npm 构建错误：插件打字稿：@rollup/plugin-typescript TS2307：找不到模块“X”或其相应的类型声明

我正在尝试构建一个简洁的组件库。我尝试用以下方法构建它： npm 构建 我收到错误消息： 插件打字稿：@rollup/plugin-typescript TS2307：找不到模块'./compone...

即使使用 ControlValueAccessor，可重用/共享的 Angular 材质自动完成也会返回 null

我实现了一个共享/可重用的角度材料自动完成，它使用来自服务器的值作为对象返回。我可以将它集成到其他组件中。但是，如果我使用我的组件： &l...

让我的提交按钮知道用户选择了哪个组件 - Flutterflow

我整个周末都在试图解决这个问题。如果有人告诉我如何做，我将非常感激 做这个。我看过视频，阅读过文档，但我就是不明白。 我有 4 个组件，每个组件

更改状态不会在 UI 中呈现

我是 React 新手，所以我遇到了这个问题，我不明白为什么会发生这种情况，我创建了一个名为 ShoppingCart 的组件，它显示我添加到购物车的所有产品： 购物车...

在“使用客户端”nextjs 组件中使用异步

我遇到了一个奇怪的行为，NextJs 允许我在文件顶部包含“use client”指令，同时仍然允许我使用异步声明组件，如下所示： '使用客户端'； 我...

未找到Riot.js 标签

我对此一无所知。我过去曾使用过 Riot（尽管是几个月前）。据我所知，我正在遵循与过去相同的流程，甚至尝试逐字复制......

Symfony 5 - 需要信号量扩展 (sysvsem)

我已经实现了全新的 Symfony 身份验证系统：https://symfony.com/doc/current/security/experimental_authenticators.html 我添加了新的登录限制：https://symfony.com...

ForEach 循环不会动态添加条目

我正在为我的应用程序创建一个带有选择选项的过滤器。我遇到的问题是运行嵌套 for 循环时不会填充选择选项。 当我指定某个索引时，...

Blazor 组件继承，没有任何渲染

我想做简单的组件继承，但是当我导航到 /testpage 时我没有看到任何东西我做错了什么？ 测试基地： @继承组件库 @if (!string.IsNullOrEmpty(名称)) { &l...

最新nextJS版本14.1.3中如何通过onClick方法使用按钮

“使用客户端” 从“react”导入 React, { useState }; 从“react-icons/fa”导入 { FaChevronLeft, FaChevronRight }； 导出默认函数 HeroSlider() { 常量我...

在组件中使用顺风图像不会居中

我正在尝试将我的文本与我创建的网格的图像对齐，但由于某种原因它无法对齐。 技能.jsx ... 我正在尝试将我的文本与我创建的网格的图像对齐，但由于某种原因它无法对齐。 技能.jsx <div className='grid grid-cols-3 gap-0 mt-10 m-auto '> {images.map((image) => ( <div key={image.id} className='h-full w-full'> <img src={image.img} alt={image.name} className='w-4/12 h-4/12 my-5 border-4 border-black justify-center items-center' /> <h2 className='text-center'>{image.name}</h2> </div> ))} </div> 我正在努力为我的技能列表打造一个漂亮美观的外观。老实说，如果有人有更好的建议来完成这个组件，我也会接受。有一段时间一直坚持想出一些好东西。 您好，您可以使用它垂直对齐它 <div class='grid grid-cols-3 gap-0 mt-10 m-auto'> <div class='h-full w-full flex flex-col items-center justify-center'> <img src="https://cdn.icon-icons.com/icons2/601/PNG/256/html_5_icon-icons.com_55763.png" alt="HTML icon" class='w-4/12 h-4/12 my-5 border-4 border-black justify-center items-center' /> <h2 class='text-center'>HTML</h2> </div> <div class='h-full w-full flex flex-col items-center justify-center'> <img src="https://cdn.icon-icons.com/icons2/601/PNG/256/html_5_icon-icons.com_55763.png" alt="HTML icon" class='w-4/12 h-4/12 my-5 border-4 border-black justify-center items-center' /> <h2 class='text-center'>HTML</h2> </div>

使用 tailwind 在 React 中通过图像进行映射时遇到问题

我目前正在尝试映射图像数组，但每当我调用该组件时，我都会得到除我尝试使用的图像之外的所有内容。 Skills.jsx 组件 从“反应”导入反应 小鬼...