问题标签 [angular2-ngcontent]

我有一个这样的父组件。所以菜单中的项目数量取决于型号。和模型的变化。

父组件：

如果菜单本身是一个使用 ng-content 的组件，我正在根据 menuItems 计数创建菜单。

其中单个 menuItem 本身是一个组件，它使用 ng-content：

父组件是这样使用的：

所以它只创建一次，然后根据用户操作（点击等）进行模型更改

现在有什么问题？问题是假设我已经创建了一个父组件。在我的用例模型中发生了变化。我确切地知道模型何时更改，但问题是在该更改中我希望始终第一个菜单项在该更改中处于活动状态。

我的问题是我无法使用 ngAfterViewInit 钩子，因为这些项目还不存在。角度变化检测需要一些时间来更改该内容。如果我使用 ngAfterViewInit，菜单项还没有在那个钩子中更新。我不想使用 ngAfterViewChecked，因为它会不断触发更改检测并导致性能问题（在模型信息中存在不断变化的流的背后）。

示例：我有活动的第 4 个菜单项和模型更改。下一个模型只有 2 个菜单项，我希望菜单项顺利切换到第一个菜单项。如果我不这样做，那么我会得到空内容。

这怎么可能解决？

我具有以下层次结构的三个组件：

我对如何将组件从组件传递<parent-component>到<inner-most>组件 Via感到困惑<wrapper-layer>。

在嵌入期间如何避免传递的组件显示在<wrapper-layer>.

假设我想将这样的标记嵌入到 ng-content 中：

为此，我可以使用选择器（看起来像普通的 CSS 选择器）：

但是如果我有这个内容怎么办（我无法摆脱'section'标签）：

我可以使用哪些选择器来获得相同的结果？这对我不起作用：

这都不是：

有什么解决方法吗？为什么选择器不能像 CSS 一样工作？这是设计使然吗？我在文档上找不到原因...

如果将 'section' 标签替换为 'ng-template' 或 'ng-container' 会有帮助吗？

我有一个名为的tab组件<ng-content select="[tabItem]"></ng-content>

有时tabItem在其他子组件内。我的问题是 Angular 从直接子项中选择内容，而不是内部子项（app-my-tab），有什么办法吗？

app.component.html

我的tab.component.html

看到这个堆栈闪电战

我们有一些数组，例如：

• heroes: Hero[];
• villains: Villain[];
• ...
• puppies: Puppy[]

和一个模板

*ngFor循环具有所有相同的内容。为了简化这一点，我们创建了一个ng-template我们可以重用的。

现在我们想像这样使用它：

在这里我失败了。我找到了整个*ngFor循环在模板中以及如何从组件本身传递值的示例，但我没有设法将 a<ng-template>插入 for 循环并正确传递变量（单个）。

编辑 解决。一切都很好，但初始化ng-template

我的子组件看起来像：

和我的父模板，如：

现在我想在没有<span>容器的情况下渲染我的子组件的内容。我的父组件模板中根本不需要容器，只需要子组件模板的内容。

我已经尝试了其他一些标签。

• <ng-content>（根本没有渲染）
• <ng-template>（嵌入式模板上的组件：）
• <ng-container>（无法在 'Node' 上执行 'appendChild'）

提前致谢！

我被困在关于 Angular 内容投影的难题上。我想将一个组件 A 投影到另一个 B 中，并在组件 A 上绑定一些属性。

例如，我有一个 SwitchButton 组件（有多种选择）。我希望这个组件显示文本或图像。

为此，这是我的 SwitchButtonComponent (HTML)：

我省略了 ts 类，这里不需要，但它当然有一个items属性。我在另一个组件中使用这个组件，如下所示：

好吧，这是一个简单的案例。它工作正常。

现在，我在项目中有一个更复杂的对象，我想显示一个图像。它会给：

img-component只是一个简单的渲染图像并具有一个属性的组件：imgPath 。

在 SwitchButtonComponent 中：

在这里可以看到我无法绑定投影组件（img-component）的imgPath属性。

你们有什么想法吗？

我在 Angular 内容投影方面面临一些挑战。我有一个模板，其中包含将要使用的每个实例的一些通用 HTML，而另一部分将通过嵌入 ( ng-content) 因情况而异。问题是无论我在模板 DOM 元素上使用的顺序如何，输出总是相同的。这是代码：

我希望产生的结果是：

假设我首先放置了嵌入元素，然后才是模板的静态部分。但即使我在模板上切换它们的顺序，结果也总是：

我不明白为什么。有人可以解释一下为什么会发生这种情况以及我能做些什么来产生我想要的输出吗？谢谢你。

注意：这是一个带有完整示例的 StackBlitz：https ://stackblitz.com/edit/angular-vfecbs?file=src%2Fapp%2Fapp.component.html

我有一个带有<ng-content>标签的表单组件和 btn 目前什么都不做。我也有一个父组件，它使用简单的输入作为内容投影。

问题是，每当我单击按钮时，父组件和表单组件都会重新加载，并且页面会以初始状态刷新。

表单组件.html：

父组件.html：

我觉得我错过了内容投影的一些基本内容。

sackblitz：https ://stackblitz.com/edit/angular-zqjxjs

html我在我的组件中编写了一些代码，如下所示。我在更新元素时​​添加span了特定的类：innerHTML

但是当我的代码运行时，我的课程不适用于 span。我得到下面的照片以使这种感觉更好：

_ngcontent_c10问题就在这里，我没有span，但我不知道如何解决这个问题。