问题标签 [ng-container]

Angular ngTemplate、ngTemplateOutlet、ngContent：选择模板的内容

我有 2 个组件：( AppComponent)<app></app>和ModalComponent( <modal></modal>)。除了：

• ModalComponent杠杆作用NgContent
• AppComponent在其标记中有一个模板

预期行为

其中的每个孩子都[#tpl]被投影到每个反映孩子的类名的ng-content地方。[select]

问题

没有任何内容获得项目，但有 1 个例外：

• 如果我添加class="modal template"到ng-container并添加ng-content，[select]=".modal.template" 那么它可以工作，但只能批发。也就是说，整个模板内容被投影到单个插槽中。

此外，如果您div#whatTheWhat在 DOM Inspector 中查看，您会看到模板的每个子代都成为#whatTheWhat. 这必须意味着内容投影发生在“输出”模板之前。

额外的

我们在 Angular 10 上，但我相信我在 Angular 7 应用程序中几乎完全准确地编写了这段代码（并且运行良好），但自 Angular 8+ 以来可能发生了一些变化。

显然，考虑到“问题”（上图）下的“例外”，我可以将我的模板分成它的每个子级，化class多个ng-containers 以反映每个ng-conent的select离子，并投射内容。如果你已经读到这里，你可以假设这不是我想要的。

问题

有没有办法“将select特定的模板内容积极地投射到另一个组件中”？即使使用原生 HTML 元素（例如<template>和<slot>），你能想出一种方法来实现这一点吗？

我有带有内联编辑的 Angular Mat 表。下面的代码内联编辑适用于带有记录的 mat 单元格，但对于具有空值或空记录的单元格内联编辑不起作用。我很乐意让空的 mat 单元格更新和编辑一些价值。任何解决方法都可以满足此要求

表基本示例.html

表基本示例.ts

编辑模式.directive.ts

可编辑的.component.ts

可编辑的.module.ts

视图模式.directive.ts

我有一系列项目，每个项目都有一个有时共享的类别。我想做的是按类别对模板中的项目进行分组。目前我通过简单地循环每个类别的数组来实现这一点，但这效率低下。我只想循环一次数组，然后分别输出到不同的部分。我似乎无法找到一个明确的方法来做到这一点。这是我希望做的粗略概述：

有没有办法使用可用的默认指令来做到这一点？

编辑：更新了示例。我想强调我不想重复类别​​部分。我想将输出定向到 4 个不同的位置。我现在可以通过运行 4 个循环来实现这一点，每个类别一次。或者，在我的 ts 中，我可以将数组过滤为每个类别的子数组。

我希望有一种方法可以单独使用模板或指令来做到这一点。

我尝试在角材料组件中构建嵌套（两级）MatMenu，但是当我在浏览器中运行它时，发生了错误。

component.html：

导航菜单：

错误：

ERROR 错误：NG0300：多个组件匹配带有标记名 a 的节点

此行的错误点：

多个组件匹配带有标记名 a 的节点

我不知道为什么会这样

我试图了解在单击切换按钮以满足 *ngIf 条件后，我的代码的哪一部分导致我的仪表板上的 mat-cards 不填充同一行。我在浏览器上使用了检查工具，我认为问题在于它仍然认为那里有一张卡，而实际上没有。启动另一个 API 调用来更新卡片听起来不正确，所以我猜测使用 *ngIf 是正确的方法，但我似乎无法理解为什么它实际上并没有删除并显示我想要的卡片同一行。它也可能与 Flex 布局响应能力有关？使用 ng-container 似乎解决了卡片位于不同行的问题，但它消除了我需要保持仪表板整洁的任何 Flex 布局响应能力。我猜那里'

这是垫卡容器的代码

提前为凌乱的截图道歉。我那里有我无法公开的数据。

我的数据模型：

迭代模型集合我需要根据它们的类型绘制图标。一些图标可以以通常的方式被淹没，而另一些则需要特殊的规则。所以我准备了一些templates：

模板由 looped 使用ng-container：

问题

在这个容器声明中，我得到了正确的模板，但我无法捕获传递给icon模板的参数。

有什么想法可以解决这个问题吗？

附言

• 角度版本：~11.2.3
• 似乎我ngTemplateOutlet没有条件也有同样的问题，我真的很困惑为什么这种方法不起作用（我们可以在角度文档中找到类似的例子）：

Angular 组件的行为如何<ng-container>，最终只能在 DOM 中找到它的内容。特别是，如果它本身是用内容编写的，那么内容最终会出现在模板的插槽中，例如假设模板基本上是：

HTML就像

那么渲染的 DOM 应该像

即<my-toolbar>宿主元素消失了。这有可能吗？

到目前为止尝试过：几个听起来相似的问题的答案是使用属性选择器，比如[my-toolbar]然后写<ion-toolbar my-toolbar>然后角度抱怨ion-toolbar匹配多个选择器，我猜是默认的 and [my-toobar]。

我想为 ionic 5 项目创建一种页面构建器。这个想法是在我的页面模板中循环一个数组。在该循环中，必须可以加载不同类型的子组件（如 WordPress帖子格式）。有多种可能的模板（例如：ion-buttons、ion-card、ion-items）。对于每个组件，我创建了一个单独的组件。从服务器我会得到一组数据。该数组中的每个项目都有一个模板变量，该变量必须引用我创建的组件模板（就像formly对表单所做的那样）。这样做的好处是组件的顺序可以由服务器确定。

我会尝试将 ng-container 和 ng-template 结合起来，但不确定这是不是这样，也不知道如何在页面打字稿中实现它。我将阅读TemplateRef, ViewChild, ContentChild但不确定如何使用 end 如何将数据传递给该循环中的模板。

数据样本

页面模板

按钮模板

按钮打字稿

页面模块

有效但感觉不正确的是：

我正在一个网站上工作，其中包含一堆从硬编码列表动态插入的表单元素myFormElements:ElementBase。每个元素都有一个字符串标签，现在我需要使这些标签可点击以打开一个新选项卡（指向外部 URL）。理想情况下，我想修改ElementBase以使其可点击，有没有办法做到这一点？如果不是最好的解决方法是什么？

如果我使用 ng-container，我有问题要在 mat-tab 中添加提示。

我尝试在 mat-tab label 上附加工具提示。它不工作。不同的是这里我使用ng-container.