问题标签 [angular-content-projection]

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 投票
2 回答
56 浏览

angular - 如何查看是否有兄弟投影内容?

我正在投影两个组件。

因此,如果我想知道例如组件一是否投影在内部,app-form-field 我会这样做:

但我需要检查一下我的内部component-two是否投射了例如组件一

我需要以某种方式检查组件二是否具有兄弟内容投影 - component-one

我怎么能在角度做到这一点?

0 投票
1 回答
55 浏览

angular - 我们应该使用内容投影还是“正常”调用子组件?

在 Angular 中,我们可以通过两种方式从另一个组件调用组件。

第一种方式是内容投影。

应用程序组件 HTML

父组件 HTML

第二种方法只是在父组件本身中调用子组件。

应用程序组件 HTML

父组件 HTML

我想知道 - 这种方法有什么区别 - 利弊。

我不知道我应该使用什么以及何时使用

0 投票
0 回答
32 浏览

angular - 清晰度组件上的内容投影

我想使用内容项目为我的应用程序创建一个通用的清晰度数据网格。一个非常简单的例子是

组件1

自定义ClrDatagridComponent

就像我收到不同的错误一样

因此,我尝试扩展 Clarity 数据网格,即https://github.com/clr-team/clr-angular/blob/master/clr-angular.d.ts中描述的简写,但没有多大成功:

但不同的错误坚持

有任何想法吗?

0 投票
0 回答
25 浏览

angular - Angular - 访问各种投影组件输入和输出

我正在使用内容投影来投影标有指定指令的自定义上下文菜单组件:

在包含组件中:

在父组件中,我得到了投影的上下文菜单指令,并根据参数确定要显示哪个,方法是从投影指令中获取正确的模板:

并使用 templateOutlet 显示正确的菜单:

这使我能够通过将各种组件标记为传递一些参数的上下文菜单来添加各种组件。但是,我也希望能够从我的父组件中访问这些组件,因此我可以设置它们的 @Input 并订阅输出(意思是:不仅可以从添加了“ParentComponent”的顶级组件访问这些投影组件' 与投影,但来自 'ParentComponent' 本身。我尝试将 ref 注入指令,因此我可以公开其包含组件,但由于包含组件不同(在示例中 - 有时它是 'contextMenu1' 有时是 'contextMenu2' )这并没有真正起作用(我尝试从同一个基类继承但没有成功)。所以...底线是:我如何访问不同类型的投影组件的@Inputs 和@Outputs。谢谢!

0 投票
0 回答
28 浏览

angular - Angular - 如何将组件从 ContentChildren 添加/删除到视图中

我想有选择地将投影组件渲染到我的父组件中。我希望 ContentChildren 使用其组件类型(而不是通过任何指令/选择)查询投影组件,因此我可以将特定组件呈现到视图中,并且仍然设置其输入并在父组件中订阅其输出。那么...如何将现有的投影组件渲染到我的组件中?

在 parent.component.ts 内:

0 投票
2 回答
67 浏览

angular - 有什么方法可以在 Angular 中使用 ng-content 修改投影内容?

我有两个组件。我们称它们为 hostComponent 和 textComponent。我想在textContent里面投影一些内容,需要根据其他一些输入属性修改投影的内容。

在上面的示例代码中,该组件应显示“Hello”,因为传递给该组件的字符计数输入值为 5。

如何将投影内容修剪为仅 n 个字符并显示相同,其中 n 是 characterCount 输入属性的值?