问题标签 [ng-content]

我有一个组件A和B

组件B不包含组件A或方式

我试图换<div class="A1"></div>行ng-template，然后componentB我正在查询它，但它总是undefined：

@ViewChild('templ') templ: TemplateRef<any>;

然后我意识到这@ViewChild是查询子组件，那么您将如何查询和渲染<ng-template>它不是子组件？

当我在 Angular 5 中的两个组件之间实现ng-content时，我遇到了奇怪的问题。

这是我的第一个组件是 FooterComponent

和 footer.component.ts

这第二个组件是 AboutComponent

这个 app-module.ts 在第一次尝试和第二次尝试中我导入 about.module.ts 或 footer.module.ts 而不是 AboutComponent 和 FooterComponent。

app.component.html 只有 router-outlet 标签

所以我有两个问题，第一个是当我使用ng serve命令行运行 Angular 时，我没有看到任何输出。第二个也是重要的一个是当我运行ng test命令行时，我看到了这个错误......

所以我一直在尝试很多解决方案，比如

1. 生成 about.module.ts 并导入CUSTOM_ELEMENTS_SCHEMA并尝试NO_ERRORS_SCHEMA。并且还导入FooterComponent，最后在app.module.ts中导入about.module.ts

2. 我对 FooterComponent 做同样的事情。

3. 我一直在尝试在每个模块中使用CUSTOM_ELEMENTS_SCHEMA和NO_ERRORS_SCHEMA，这给了我相同的结果。

而这个 package.json

最后，我创建了这个新的 Angular-cli 项目。

谢谢。

我有两个组件：

App.component.html

Table.component.html（定义表）

结果

为什么会有 tbody 标签？有没有办法从 ng-content 中删除标签？我只需要在 html 中显示 tr 及其子项。预期的结果应该更像：

I have a component which toggles the component's template based on client device size. Component code is:

I use it like this:

In the mobile size, everything works correctly but in desktop size the value passed to search(value) function is always an empty string.

When I debug the app, it seems that #searchInput templateref is not working correctly (value of the element it refers to is always empty).

Why templateref doesn't work correctly?

假设我们有几个组件，每个组件都应具有不同的布局/ui（模板），并以显示尺寸为条件。

我的解决方案是创建这样一个组件：

并以这种方式使用它：

此解决方案可能存在一些缺陷。例如，我们不能在<mobile>和<web>部分中使用相同的模板引用。（上面我们使用#searchInputand #searchInput2）。


这种情况的最佳做法是什么？

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

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

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

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

这都不是：

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

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

我尝试使用嵌入 n angular6 并且无法使我的范围变直。

现在我希望哑组件（component-dumb-1，component-dumb-2）使用智能组件（component-smart1）范围/方法/属性。

我的目标是能够在嵌入中用不同的组件组成不同的变体，所有这些都使用智能组件中的相同方法。例如：

这可能吗？

如何将 ng-container 与具有 select 标签的 ng-content 结合使用。

我正在构建一个自定义模态组件（我想要一些简单的东西），我发现这种行为我无法理解。

这是我的模态组件 HTML

如果我使用这个组件模板一切正常，我以后可以像这样使用该组件，并且将按预期工作。

当我尝试封装其中ng-content一个 div 时，问题就来了。如果我做

生成的 HTML 将如下所示。

任何想法为什么header不在.is-flexdiv内结束？谢谢！

实际上，我正在通过包装 Angular 材质工具栏组件来创建自定义组件。我使用 ng-content 包装了第一个元素 mat-toolbar，并且仅使用 ng-content 包装了第二个元素 mat-toolbar-row。

在这里，我在投影第二个或多个 mat-toolbar-row 时遇到了一些问题，因为它没有在下一行显示它作为下一个工具栏行，它只在第一行显示第二个工具栏内容。因为我知道 ng-content 是静态投影，所以它在第一行投影第二个工具栏行，我该如何解决这个问题。

请在此处查找stackblitzLink，我还在自定义组件下方显示了材料示例。请帮我解决这个问题。提前致谢。