angular - 以编程方式在角度 2 中设置组件的内容

Question

我创建了一个简单的窗口组件，它有一个标题并显示了一些内容。我的应用程序一次只会显示一个窗口，所以我将它放在我的应用程序的根目录中，并且只在需要时更改其内容。

由于我需要能够从应用程序的各个位置设置窗口内容，因此我创建了我的组件绑定到的服务。这样我就可以从我需要的任何地方调用服务上的方法，并更改窗口组件的属性。

然而，我不知道如何处理该服务，是指定要显示为窗口内容的组件实例。我可以以某种方式例如以编程方式设置ng-content窗口组件吗？

我当前的解决方法是在窗口组件中指定所有可能的内容，并选择正确的内容，*ngIf如下所示：

<contentA *ngIf="windowService.getContent()='a'"></contentA>
<contentB *ngIf="windowService.getContent()='b'"></contentB>
<contentC *ngIf="windowService.getContent()='c'"></contentC>

它工作得很好，但是列表越来越长并且难以维护。我也不喜欢将我的窗口组件与所有其他与它无关的组件结合在一起。此外，每个不同的内容都有自己的输入参数，现在窗口服务和组件也需要跟踪这些参数......

所以我的问题是；是否有一个我不知道的角度特性可以解决这些问题，或者我应该以另一种方式处理它？

想到的事情是ng-content在窗口组件中放置一个标签，并以某种方式让服务用我需要的东西替换那个标签。或者我应该router-outlet在我的窗口组件内放置一个？我也不喜欢这种方法，因为更改内容不应该算作导航。我已经有了一个与这个组件无关的出口。

Answer 1

我创建了一个简单的窗口组件，它有一个标题并显示了一些内容。我的应用程序一次只会显示一个窗口，所以我将它放在我的应用程序的根目录中，并且只在需要时更改其内容。

用于这种确切场景的主要 Angular 功能是路由器。其目的是在页眉和页脚中路由特定组件。

例如，这是我的主页及其标题和菜单。它当前被路由到 Movie List 组件，因此在菜单下显示它：

如果用户单击特定产品，路由会自动将 Movie List 组件替换为适当的 Move Detail 组件：

这与您需要做的事情相匹配吗？

Answer 2

您当前的方法确实效率低下，并且难以扩展。

你应该看看Angular 的动态组件

希望这可以帮助。

更新请注意，在大多数情况下，路由将是您所需要的。动态组件非常适合（顾名思义）动态内容，您不想更改应用程序状态（即 url）。我将您推荐给动态组件的原因是因为您提到您已经在使用路由器并且正在寻找不同的解决方案（尽管从技术上讲，您可能有嵌套路由甚至弹出路由）。