问题标签 [angular2-ngcontent]

我尝试编写一个包装器组件，它可以传递一些文本和一些参数，然后根据这些参数使用引导程序格式化我的文本。

我试过这个：

header-line.component.ts

header-line.component.html

header-wrapper.component.ts

header-wrapper.component.html

预期用途

用法大致如下：

预期产出

然后我会期望输出创建等效于：

有效输出

但是，我得到的是以下内容：

问题分析

我只花了一点时间就发现我的问题的原因是在 header-wrapper.component.ts 中的重复使用，因为它显然是静态的，不能动态使用。

以下两个链接解释了为什么我的期望令人失望：

https://github.com/angular/angular/issues/9173

https://github.com/angular/angular/issues/8563

寻找解决方案

Stackoverflow 上的以下链接显示了如果只需要支持两种情况，如何做到这一点：

如何有条件地将 div 包裹在 ng-content 周围

使用这种方法，我管理了以下内容：

更新：header-wrapper.component.html

这会产生所需的输出。

我的问题

这真的是唯一的方法吗？或者有没有我想念的更简单的方法？

嗨，我正在尝试将组件的内容分成两部分，但我似乎无法使其工作。我知道我可以ng-content使用该属性select，但我不知道是否可以使用它选择多个元素。

我有这个代码：

在我的 component-x 中，我希望它是这样的：

lastXDivs 等于孩子的数量。

我的结果是这样的：

有没有办法做到这一点？

请注意，在我的例子中，div 1 到 5 的内容是动态的。

谢谢

我有一个离子页面，在一个自定义组件内有一个离子选择，当标志isLoading为真时它会显示自己。ion-change 回调使用 Observable 发出网络请求，回调执行的第一个操作是将isLoading标志设置为 true。

当请求完成isLoading设置为 false 但离子选择项未更新时，我不明白问题出在哪里。

下面我展示了使用的代码，网络调用被替换为重现错误的延迟（）

这是一个错误吗？这是一个角度问题吗？在花了三天没有成功后，我需要帮助

自定义组件 HTML

自定义组件打字稿

页面 HTML

页面打字稿

我正在尝试构建动态选项卡，所以我决定使用 ng-content 的 Transclusion 方法，但我无法从 ngFor 循环中获取对象。这是我的代码

这是我的stackblitz 网址

所以在这里，而不是这个

如果我尝试像这样使用 ngFor 循环的对象，

我得到错误，我无法使用该对象

我尝试了所有这些变体来使用该对象，但我没有成功

我有一个组件：

使用组件时，我希望将 div 的模板传递到组件中，以便它可以与不同的对象类型一起使用。

这可能吗？

谢谢

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

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

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

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

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

我正在尝试构建一个“SmartLinkComponent”，它可以区分内部链接和外部链接，同时可以将任何 html 内容包装在标签中。我想出了以下解决方案（smart-link.component.html）：

解析变量的逻辑isInternal完美无缺，所以我不包括这里的代码。

问题是此代码仅适用于布局中出现的第一个。上面发布的代码仅呈现!isInternal. 当我像这样交换代码时：

然后角度仅呈现<ng-content></ng-content>内部链接。<ng-content></ng-content>当它没有任何关联的指令时，它甚至似乎只能在布局中使用一次，select但我找不到任何有关此的文档。但是，*ngIf这里的条件是互斥的，所以我真的不确定是什么问题。

编辑：这里是 smart-link.component.ts 的（匿名）代码：

我想通过ng-template嵌套ng-content在孩子里面

应用组件.html

父组件.html

父组件.ts

指示

子组件.ts

堆栈闪电战： https ://stackblitz.com/edit/angular-cuipde

我希望TemplateRef向下传递两个级别：app-component > parent > child

在 Angular 应用程序中，我有一个带有<ng-content></ng-content>. 我为将放入 ng-content 的内容添加了 scss 规则，但它们被忽略了。我试图解决 using :host，但它不起作用。

https://stackblitz.com/edit/angular-ewqhzj

包装器组件：

嵌入组件中的样式：

问题是未设置“toBeColored”字符串的粉红色

我正在尝试使用 Angular 8 绑定数据，但失败得很惨。我尝试的一种方法如下：

和输出：

我希望输出为：

仅供参考，{{result.percentage}}给出和输出24。

请忽略_ngcontent-kyh-c1=""Angular 8 生成的。