问题标签 [ng-content]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
0 回答
48 浏览

angular - 从 ngTemplate 为多个 ng-contents 提供数据

我正在尝试将数据投影到几个 ng-contents,但是通过 ng-template。像这样的东西:

child.component.ts

app.component.ts

问题是它不起作用。如果我不使用“选择”属性,它确实有效,但不会将 div 放置在正确的位置。

我已经尝试在子组件ContentChildren中手动使用和添加,TemplateRef但它仍然不会在正确的位置呈现 div。

Stackblitz 示例: https ://stackblitz.com/edit/angular-vdqmkl?file=src/app/child.component.ts

0 投票
1 回答
59 浏览

html - 清空 ng-content 字段会发生什么

简单的问题:

Angular 文档建议不要在组件端进行条件渲染的情况下使用 ng-content :

如果您的组件需要有条件地呈现内容,或多次呈现内容,您应该将该组件配置为接受包含您想要有条件地呈现的内容的元素。

不建议在这些情况下使用元素,因为当组件的使用者提供内容时,该内容始终会被初始化,即使组件没有定义元素或者该元素位于 ngIf 语句中。来自:https ://angular.io/guide/content-projection#conditional-content-projection

这是否也适用于组件槽的消费者?例如:

如果条件不成立,底层的 ng-content-select 是否仍会被渲染?

0 投票
0 回答
18 浏览

angular - 带有切换按钮的 ng-content Angular 6 项目

我在我的 Angular 6 项目中有以下代码,其中我们显示切换器开关按钮类型为“活动”和“已完成”。

下面是相同的代码。在这里,我将页面加载时的默认选择设置为“活动”。and when select completed records it adds .active class to the existing class and color changes and once user clicks on any selection I do trigger event and my underlying component loads data based on input params I set on the component.

和事件如下:在(.ts 文件)

因为这将在其他组件中很常见,其中内部文本会发生变化而其余部分保持不变,这可能是角度嵌入的情况,还是我可以创建一个具有输入属性和事件发射器的单独共享组件来完成任务,如果这可能是使用的情况,任何人都可以帮助我了解通过嵌入来实现这一点的更好方法是什么?

我已经开始这样做了,但我不确定其他组件的自定义事件将如何在这里紧密耦合。下面将其视为可以由其他父组件实现的共享组件。

0 投票
0 回答
28 浏览

angular - ChildComponent 和他的 Parent 之间使用 ng-content 进行交互

我有两个组件:

第一个(我们不关心 .ts :D)

第二个:

我想要做的是能够从 secondComponent 中添加/删除 secondclass。

第一个问题:我element的为空。我没有提到#element我的第一个组件。

第二个问题:我不知道如何触发对我的 secondComponent 的按钮单击。(这是拥有onClick功能的他

有可能做我想做的事吗?以及如何(如果可能的话:D)谢谢!

0 投票
1 回答
93 浏览

html - 将 ng-content 与 *ngtemplateOutlet 一起使用不会在 DOM 中显示

我有三个 Angular 组件,一个基础组件和两个子组件(child1 和 child2),具有以下结构:

child1.component.html

child2.component.html

base.component.html

当我检查 DOM 时,它正确显示 child1 但 child2 没有出现,并且有

有人有一些解释吗?
请注意,我的结构绝对需要这种结构,因为我需要在基本组件中插入子元素的内容,而无需添加额外的 html 标记。
谢谢!

0 投票
1 回答
34 浏览

angular - 使用带有 ng-template 的动态组件的问题

我有问题(我认为是上下文),将动态组件与 ng-template 一起使用。

https://stackblitz.com/edit/angular4-wlv9rj?file=app/guidelines/guidelines.component.ts

我不明白我做错了什么,但我认为这是 Hook 的问题。

0 投票
2 回答
28 浏览

angular - 如何以编程方式在 ng-content 中包含一些由特定标记名过滤的组件?

我想在我的角度库中简化开发人员的体验。这就是为什么我试图使用带有特定选择的 ng-content,这些选择会自动填充,而无需开发人员添加类。

例子:

应用

app.component.html

图书馆

lib-frame-component.html

库框架组件.ts

我怎样才能做到这一点 ?

0 投票
0 回答
24 浏览

angular - 如何使用 ngProjectAs 填充 mat-table-cell

我有一个自定义表格组件包装 mat-table,以允许传递定义表格结构(列、值类型等)的模型。表格组件有一个包含一个或多个按钮的操作列。我想ng-container在我的视图中提供这些按钮,如下所示:

然后在表格模板中渲染:

问题是没有渲染...看起来与ng-content在渲染表格行的循环内输出有关,因为如果我移到表格ng-content外,内容会正确渲染。

这有可能实现吗?当前的替代方法是对操作列中的每个可能的按钮使用输出发射器,这会用额外的输出污染表组件,其中大部分不会在给定的表上使用。

0 投票
0 回答
20 浏览

angular - 如何将多个 ng-templates 传递给 ng-content?

我正在使用 Swiper 的 swiper 组件,您可以显示幻灯片的方式是使用带有 SwiperSlide 指令的 ng 模板。我想让我的 swiper 组件可重复使用,并每次都使用该组件而不是 swiper 的组件。这就是我想要的流程

功能组件 -> 传递多个 ng 模板 -> 我的 swiper 组件然后将这些 ng 模板传递给 -> Swiper 的 swiper 组件。

在此处输入图像描述