问题标签 [ng-content]

我有一个包装器组件，它用标题包装它的内容。
我使用 2 个不同的ng-content组件和 2 个不同的选择器，以便将一些内容转入边框区域，并将一些内容转入标题行（操作等）。

wrapper.component.html代码看起来像这样：

我有一个parent使用包装器的组件（我们称之为它），它托管另一个组件（我们称之为它child），我还想将内容转入包装器的标题行。

parent.component.html代码看起来像这样：

最后，child.component.html看起来像这样：

这不起作用，这意味着动作 4 的锚元素不包含在标题区域中，而是留在子元素的节点内。
我尝试使用该ngProjectAs属性，但无济于事。

有没有办法在不求助于动态组件（例如 ng-template 等）的情况下实现这一点？

I have a custom component called Suggestion List, which displays a list of Suggestions to the user from an observable. I have created this component as generic as possible so you can pass any array of data, so I'd like to be able to customize the display of it from the parent as I'll never know for certain what the objects will look like until implementing it. Unfortunaly I can't access the child components variables from the parent in ng-container.

Is this possible with ng-container or ng-template or should I be taking another route altogether?

Parent Component

Child Component

我正在创建一个翻转面板。面板由三个部分组成。

• 面板工具栏
• 面板正面
• 面板背面

工具栏有一个固定部分，即翻转按钮。

在我的 Flip-panel.component 中，我有一个用于工具栏的 ng-template，因为工具栏应该显示在两侧并且应该相同。但我也在这个模板中使用 ng-content 来获取工具栏的用户定义项目。

我的翻转panel.component：

我遇到的问题是，工具栏中的用户定义项目（从面板工具栏中选择的内容）仅显示在背面内容上。

这是一个完整的例子： https ://stackblitz.com/edit/angular-fsnww2?file=src%2Fapp%2Fapp.component.html

当前代码有效，但肯定远非理想（我的意思可能不是 Angular 方式）。

我的组件可能会也可能不会投射外部内容。仅当组件的Input s 之一未未定义时，才会呈现投影内容所在的 div 包装器。setTimeout调用发生在前Input的设置器中以推迟一些 DOM 内容检查，告诉是否应该应用特定的类，changeDetectorRef.markForCheck()最终会相应地触发视图更新。

有人可以指导我应该做什么吗？

尽管阅读了几篇使用如下图的文章，但我对 Angular 生命周期解析过程感到困惑。我希望“页脚” ViewChild在执行时被填充和访问，ngAfterViewCheck但似乎不是。玩弄生命周期钩子ngAfterContentCheck和ngOnChanges也对我没有帮助，ContentChild投影的内容引用装饰器也没有帮助。

父组件（app.component.html）：

子组件（course-card.component.html）：

当我运行上面的示例时，在子组件中的两个通配符<ng-content></ng-content>（第一个和最后一个）中，只有最后一个被投影，而不是第一个。为什么两个或第一个都没有被投影，只有最后一个？

我正在使用 Angular 4，并且我有一个组件“X”，它基本上是一个折叠扩展组件。它包装了提供给它的所有内容，并在单击时折叠和展开它。它看起来类似于下面的一个。

我有另一个组件“Y”，我将它放在“X”组件中，例如：

现在我已经意识到“Y”组件被实例化了两次，即构造函数ngOnInit、ngOnChanges 一切都被调用了两次。

使用会不会有问题<ng-content>（我仍然不完全确定）。如果是，我应该如何处理这个问题，只调用一次我的“Y”组件，因为我只需要将组件“Y”包装在“X”中。

编辑：我错过了在问题的前面添加我正在使用ngxPermissions库有条件地显示“”。所以它更像：

我无法在我的 UI 页面中显示请选择食谱。

我使用了 ng-template 选项，但它没有按预期工作。

标签内的内容不显示

我正在尝试使用 Angular 8 构建一个简单的仪表板组件；仪表板中包含的每个项目都可以是任何东西。我构建了两个不同的组件，一个用于仪表板本身（主容器），第二个用于识别仪表板中的区域（这将接收小部件组件列表）。

目前我的解决方案非常简单。基本上，我使用ng-content将我的嵌入元素投影到主组件中。我给你看一些代码

通用仪表板容器：

my-dashboard组件就是这样：

使用这种方法，一切正常，但我无法访问投影组件的单个距离，例如当我们确切知道插槽时。例如，如果我想从我的仪表板组件中获取某个组件的信息，这是不可能的。这是正确的方法吗？我在文档中找不到有关内容投影的太多信息。

我有 2 个具有相同组件的选项卡，我需要根据活动选项卡（ng-template 上的 ngIf）初始化其中一个：

但是如果组件初始化两次，尽管它不包含 DOM。有什么问题？以及我如何修复它以将其初始化一次。

https://stackblitz.com/edit/angular-gqratd?file=src

我在 Angular 9 中创建了一个组件，并在组件中使用来注入 html。到目前为止，它仍然很正常（正确渲染html）。但是在构造函数中添加参数后，组件中的 html 不会在浏览器中呈现，只会在浏览器中呈现 ng-container 内容。我能怎么做？

我试图删除构造函数参数，然后组件正确渲染..但我需要在组件中导入render2和elementRef，所以我不能这样做

myComponent.component.ts

myComponent.component.html

app.component.html

但是当在 chrome 中呈现时，组件中的 html 不会在浏览器中呈现....

正确的渲染如下