问题标签 [ng-content]

我有一个用于显示代码的 Angular 组件，如下所示：

我以以下方式使用此组件：

这会产生“测试 xyz”。使用时

我得到了预期的换行符。

所以显然 ng-content 似乎失去了换行符。有没有办法可以强制 ng-content 保留这些换行符？

编辑：按照评论者的建议，我得到了它的使用

我更希望能够使用 app-example-code 而无需每次都添加，但我想只要它有效，我就会很高兴。

我读过这还不被支持，但我想知道是否有人想出了一个解决这个问题的方法。

我目前拥有的是具有此模板的父组件：

这正在创建以下内容：

但我想要它做的是获取以下 html：

此问题是否有任何已知的解决方法？

谢谢！

我正在尝试ng-content在 Angular 6 中使用多个构建自定义组件，但这不起作用，我不知道为什么。

这是我的组件代码：

我正在尝试在另一个地方使用这个组件，并在内部body和标题select中呈现两个不同的 HTML 代码ng-content，如下所示：

但是该组件呈现空白。

你们知道我可能做错了什么或者在同一个组件中呈现两个不同部分的最佳方法是什么？

谢谢！

I am following this tutorial like so:

But I am getting

Uncaught Error: Template parse errors: 'app-autocomplete-input' is not a known element:

1. If 'app-autocomplete-input' is an Angular component, then verify that it is part of this module.
2. If 'app-autocomplete-input' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. (" [ERROR ->] ...

and I don't quite understand what the problem is here.

This is how I am trying to use app-autocomplete:

我正在使用 AGM（Angular Google Maps），我想创建一组我自己的自定义组件，这些组件包装 AGM 组件以允许在我的应用程序中进行高度重用。

但是，当我这样做时，标记（在此示例中）似乎没有在地图上呈现，但我没有收到任何错误。我想知道这是否与嵌套组件有关<ng-content>

任何人都可以帮忙吗？我有一个stackblitz设置。请参阅底部的更新，了解使用Slot.

TLDR：当我嵌套自定义组件时，它会创建一个似乎破坏功能的ng-contentHTML 元素中间人。agm

我的核心组件是vmap

请注意，如果我agm-marker在模板中重新评论，它会呈现。只有在ng-content.

这是v-map-plots子组件

这是 AGM 问题还是 Angular 问题？这有关系ng-content吗？有办法解决吗？

更新 根据@Anytoe 的评论，这里是我的用例：

我的想法是我可以制作许多可重用的地图组件，然后我可以在需要时在整个应用程序中重用它们。

更新 2我读到了 Slot 并认为这可以帮助我，所以为 Angular 7 设置了一个新的 Stackblitz并使用了 slot，但也无法让它工作

我正在使用@ngx-translate版本 11.0.0

我有一个<ng-content></ng-content>包含在其内容中的自定义组件。

当我在我的组件上应用翻译指令时，它并不针对内容。我该如何解决？

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

我希望产生的结果是：

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

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

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

我试图使用带有自定义样式的 ngx-select 显示下拉项目。下拉项是另一个组件的数组（具有组件特定的样式）。如何做到这一点？这是我的代码selectDropdown

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

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

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

我需要在我的项目的多个组件中加载。因此，与其在组件中一遍又一遍地放置相同的 HTML，我需要知道不重复代码的最佳方法是什么，但我不知道这样做是否正确。我创建了一个名为 的组件loading-graphic，我将它绑定到各个组件的每个 HTML 文件中。我读过ngTemplateOutletand ngContent，但老实说，在这种情况下使用它是没有意义的（而且我也不明白......我是它的初学者）。那么，我应该赌什么？谢谢。