如何将目录中不同位置的多个组件加载到同一个视图中？答案

【问题标题】：How to load multiple component which are at different places in the directory into the same view?如何将目录中不同位置的多个组件加载到同一个视图中？
【发布时间】：2021-05-12 07:47:20
【问题描述】：

我是这里的新手。我遇到了一个问题。我有两个组件需要根据点击加载到 app.component 中。所以这里是场景：两个组件：

1.你好组件

2。再见组件

现在在 app.component.html 我有一个按钮 loadHelloComponent() 它使用角度的动态组件加载方法加载 hello 组件。 Angular doc link for dynamic loading

在这个 hello 组件中，我有一个按钮，单击它会运行函数 loadByeComponent() 和应该加载再见组件

应该采用什么方法来实现这一点？我必须在 app 组件中附加两个模板，但 Bye 组件依赖于 Hello 组件？

这里是stackblitz链接Live editor link

您的帮助将教会我并为我节省大量时间，因为我已经花了一天的时间。谢谢

【问题讨论】：

标签： angular angular2-template

【解决方案1】：

我已经解决了这里的问题是link

问题是你没有遵循正确的父子关系。

【讨论】：

感谢您的评论。我明白这一点，但问题是在 hello comp 中加载再见。它就像我希望他们两个分开
它是一个单独的组件，但如果您不想动态加载它，则创建一些变量，如 isHidden 并将其设置为 false onClick 并使用 ngIf 显示和隐藏再见组件

【解决方案2】：

您的 HelloComponent 类中没有 loadByeComponent 函数，因此您无法从它的模板中调用它。

this 是你想要达到的目标吗？

【讨论】：

感谢您的评论。你能检查一下链接吗？它不工作
奇怪，刚刚在这里检查。它对我有用。我附上了一张结果图片
是的，链接现在可以使用。不，我不想这样实现，因为这样如果你检查开发工具，你会看到 .. bye 组件在里面加载你好比较。我希望他们两个都分开你知道我们如何做到这一点吗？