问题标签 [ng-container]

假设我们有几个组件，每个组件都应具有不同的布局/ui（模板），并以显示尺寸为条件。

我的解决方案是创建这样一个组件：

并以这种方式使用它：

此解决方案可能存在一些缺陷。例如，我们不能在<mobile>和<web>部分中使用相同的模板引用。（上面我们使用#searchInputand #searchInput2）。


这种情况的最佳做法是什么？

我想制作通知栏并将 HTML 模板作为这个：

但是对于不同的通知，应该有不同的message模板，比如：

我可以在组件中制作一个丑陋的方法来打印带有这些 HTML 标签的消息，但是有没有更优雅的方法呢？

丑陋的方法：

我有一个接受并显示自定义 NgTemplate 的 Angular 组件（ParentComponent）。我希望 ParentComponent 通过 EventEmitter 从 NgTemplate 中的组件接收事件。像这样的东西：

父组件.html

其他组件.html

这是我能想到的最简单的一个例子，所以希望它足以理解这一点。这样的事情可能吗？如果不是，可以使用哪些策略来完成同样的事情？

我正在尝试编写一个单元测试来查看是否<ng-container>存在包含在其中的元素，但是我的测试失败了，因为似乎元素是以任何方式创建的。

我的代码是：

HTML

单元测试

我宁愿不必将我的元素包裹<ng-container>在另一个元素中；我在网上看到一些文章说要这样做，但是有没有办法检查 Angular 容器中的元素而无需绕过它？

谢谢！

我正在使用 Angular 5 并尝试将ng-select包装在自定义组件中。我的理由是封装它，以便在需要时可以轻松更换。如果有更好的方法来做到这一点，请告诉我。

我创建了一个自定义组件，我有各种 @Inputs() 依次传递给内部 ng-select。这一切都很好。

我的问题是如何正确地将 ng-select自定义模板传递给包装的 ng-select？

这是我到目前为止的一个例子，为了简单起见，我省略了一些输入。

这就是我调用传入自定义模板的包装器的方式：

在包装器组件中，我将模板声明如下：

这是包装器组件html：

上面确实渲染了模板，但标签和选项的所有样式都丢失了，只是在白色背景上显示为文本。

我一定遗漏了一些东西，我怎样才能让样式正确渲染？

另一个问题是 ng-select 在每个标签上都有一个关闭按钮，可以将其从所选项目中删除，还有一个关联的 clear() 方法 - 但是当我在 ng-select 之外的模板中使用它时，它无法识别，例如

如何在 ng-select 之外的 ng-template 中使用 clear()，有什么方法可以获取对它的引用并调用它吗？

谢谢。

如何将 ng-container 与具有 select 标签的 ng-content 结合使用。

我从不同的 REST API 获得的数据具有带有特殊字符的字段名称和它们之间的空格。

例如，不要row.DatasetID像这样传递：

我想这样传递它：

如果返回正确/字段名称包含空格或“@”等特殊字符，我该如何格式化映射？

我正在使用 ng-container 迭代列表并创建组件

我会列出 ng-container 中的 References 组件。

我尝试使用 @ViewChildren('#fieldcmp') fieldsList: QueryList; 和@ContentChildren('#fieldcmp') fieldsList: QueryList; 在父组件内部，但如果我尝试访问 ngafterViewInit，我没有得到任何元素

有人可以帮助我吗？谢谢

------------更新------------

用@ViewChildren('fieldcmp') 修复后，我有一个ElementRef 列表，而不是我的AppComponent。我用它和所有的工作

谢谢你的帮助

我有以下标记：

我想实现“全选”功能。

如您所见，我在表头中有条件，如果表头名称等于某个值，则在该表头上添加一个输入。在表体中，我还有一个条件，是否应该checkbox在列中添加一个。

当我选择#chkAll表头中的复选框时，我希望下面行中的复选框也被选中。我以为这样[checked]="chkAll?.checked"就checkboxes可以解决问题，但它不起作用。

这是我的 Stackblitz

我在这里遇到问题，我的 ngFor 没有显示任何数据，尽管没有堆栈错误或其他东西。

我想知道如何显示我的对象数组——称为“cldbAccounts”——它必须包含对象并在同一列中显示它们的两个属性。

我那部分的代码

我也尝试了这个答案的解决方案，请参见此处，但存在同样的问题