问题标签 [angular2-ngcontent]

我一直在尝试制作一个选项卡视图，并认为内容投影可能是一个好方法。我从这篇文章中学到了它。我认为我可以通过输入给定的组件数组来使其动态化，并且它们将显示为所选选项卡的页面。

这是我这样做的尝试：

旁注， add() 作为按钮的单击处理程序不是为了避免此错误而使用的其他功能："EXCEPTION: Expression has changed after it was checked". 如果我把它放在任何生命周期钩子中，我就会得到这个错误。虽然这是一个以后要处理的挑战。

所以基本上我在数组中创建每个组件，然后我将它们作为每个创建的选项卡组件的 ng-content 粘贴。然后取出每个 Tab 组件并将其粘贴到 Tabs 组件的 ng-content 中。

问题是选项卡组件永远不会找到动态创建的选项卡子项的 contentChildren。这是未定义内容子项的选项卡组件的代码。

我似乎很清楚，选项卡组件是在不同的时间创建的，而不是当我需要从选项卡组件作为内容子项访问它们时。我也尝试过使用 ChangeDetectionRef.changeDetect() 但这没有帮助。

也许通过内容投影来完成这一切并不是最简单或最好的方法，所以我愿意接受建议。这是plunk，谢谢！

我正在尝试在 Angular 2 中创建一个 DatePicker 组件。

我希望这是一个属性组件，所以我的 html 看起来像：

问题是在渲染模板时，它将它包装在输入标签内。

我的模板如下所示：

当我在浏览器中检查元素时，它看起来像：

这使得它对浏览器不可见。它确实需要附加在输入标签之后。

我期待看到的是：

如何让我的模板在输入标签之后呈现，而不是将其包裹在其中？

ng-content我正在尝试加载不同的“父”组件，并通过定位每个父组件将路由内容注入这些不同的父组件。本质上，每个父组件都根据设备宽度（小型/移动设备、中型/平板电脑和大型/台式机）处理导航和其他样板文件。

在我的应用程序中为每个路由生成的内容需要被嵌入（注入）到父组件中。每条路由的内容都针对特定的注入点，使用ng-content.

我可以使用<ng-container *ngComponentOutlet="ResponsiveComponent;"></ng-container>. 问题是我的路由生成的内容没有被注入到ng-content每个父组件的目标位置。

这是交换父组件的代码。 AppPageComponent扩展ResponsiveComponent它根据媒体查询监视设备宽度。

Angular 的NgComponentOutlet文档显示您可以将可选的可投影节点列表作为目标，以插入到内容 (ng-content) 占位符中。我遵循了 Angular 文档中的示例，并且能够将文本节点注入到ng-content我的父组件中的不同占位符中，它适用于我的小型/中型/大型父组件。

如何从我的路线中获取内容以注入这些不同的占位符？看来我真的很接近让它发挥作用。我可以将本质上的静态内容注入占位符，但我不知道如何将路由生成的内容注入占位符。

更新 - 2017 年 7 月 25 日

我创建了这个plunker 来演示这个场景（https://plnkr.co/edit/hOwRX1Ml6gX0S8em6nd5?p=preview）。

在 plunker 中，page-wrapper组件使用 ngComponentOutlet 根据设备宽度加载小型/中型/大型组件。page-wrapper 组件将静态内容注入到每个小型/中型/大型组件的占位符中，而不是从第 1 页注入路由内容。

我的目标是拥有一个页面包装器组件来处理响应式需求，例如针对小型/中型/大型响应式设计的不同导航元素。

那么，如何将“静态”内容注入到动态加载的组件的ng-content占位符中，而路由生成的内容却没有注入到ng-content占位符中？

谢谢你的帮助。

我想在多个位置向primeng数据表（p-datatable）添加一些服务器端分页功能，因此我声明了一个具有我需要的功能和行为的新组件“pagin-datatable.component”。

所以pagin-datatable.component.html (template) 附带：

我希望我的 p 列仍然在我的main.component.html中声明，例如：

我的问题如下：如何告诉我的页面组件让 p-datatable 处理发送到组件标签的内容？

在下面的答案之后：

找到这篇文章来解决primeng问题：github.com/primefaces/primeng/issues/1215。

我是 Angular 的新手，并试图在打字稿页面中列出引导面板。

所以我试图这样做

bootstrap.panel.component.ts

然后在主应用程序组件文件中，我像这样引用并使用它

app.component.ts

但这没有在内容中显示文本

这是它的输出

一旦我按下F12，在控制台部分我可以看到这样

上面的错误是

未捕获的类型错误：无法读取 null 的属性“getSelection”

然后我找到了以下解决方案，它禁用了 Google Chrome 中的所有扩展，然后上面的控制台错误消失了，但内容中仍然没有出现。

我该如何纠正这个

我正在制作一个可以从组件列表动态创建选项卡的选项卡视图。此外，在将这些组件添加到 DOM 之后，我希望能够使用按钮添加它们。

感谢用户 yurzui 的帮助，我能够进行组件的初始创建工作（参见此处）。挑战是一旦创建了选项卡组件，我就无法访问可投影节点列表来将动态创建的选项卡添加到其中。

这是笨拙的：

我知道每次添加选项卡时我都可以重新创建选项卡组件，如下所示：

尽管我想避免这种情况，因为这些组件可能会变得非常复杂，并且加载时间可能不合理。

我觉得在创建组件后直接访问可投影节点可能会要求 API 的访问权限。考虑到这一点，我已经查看是否可以在 ComponentRef 上找到一些方法来帮助在这个已经实例化的 TabsRef 上添加选项卡。

这很接近：

可悲的是，这不起作用，因为选项卡未定义。如果我缺少另一种方法，我会对此持开放态度。或者，如果这是不可能的，我也想知道。

有一个包含电子邮件、密码字段和提交按钮的表单组件通过 ng-content 传递，以便可以显示登录表单“登录”按钮和注册表单“注册”按钮。表单组件模板代码：

表单的父组件代码：

运行此代码后，出现“TypeError：无法读取未定义的属性‘有效’”错误。如何解决此错误？

我创建了一个选项卡视图，其结构如下：

我创建了每个组件：选项卡、选项卡和放置在 ng-content 中的组件。地方。问题是当我在 ViewContainer 的末尾插入时（它使用 ul 作为它的锚元素），顺序选项卡嵌套在选项卡内部，如下所示：

这是花哨的把戏，但没有帮助。当我在位置 0 插入时，不会发生这种奇怪的嵌套，但是选项卡的插入顺序与它们创建的顺序相反，这导致我稍后在我的应用程序中出现问题。

创建带有可投影节点的选项卡的代码如下所示：

我觉得问题可能在于我如何创建 ng-content（可投影节点）。不幸的是，我不知道为什么 viewContainer 似乎使用选项卡的 ng-content 作为锚元素来插入下一个选项卡。

我非常感谢对 viewContainer 有更好理解的人告诉我为什么会发生这种情况。这是我演示此嵌套行为 的示例应用程序。

我想知道是否可以创建 . 我需要对 ng-content 的每个元素使用不同的 css 类，因此我需要对 ng-content 的每个元素进行循环。可能吗？

现在我将一个参数传递给子元素以枚举他，但我想在没有数字的情况下这样做。这是我的代码：

如您所见，我将数字传递给孩子，以便我可以识别他是谁，但我想为 ng-content 创建一个循环，以便我可以为每个“sys-tab-content”添加一个不同的类

我正在尝试排除弹出菜单，所以我可以这样写：

我有一个panel-menu带有这个 HTML 的组件：

并panel-menu-item使用此 HTML：

问题是生成的 DOM在和panel-menu-item之间有一个，这会破坏第三方 CSS。ulli

有没有办法只投射所选儿童的内容，而不是儿童本身？

这个答案建议在组件上使用属性li而不是组件，但这会泄漏实现。的用户panel-menu不需要知道菜单项的实现方式是什么元素。