以编程方式设置 angular 中组件的内容 2
Programmatically set content of a component in angular 2
我创建了一个简单的 window 组件，它有一个 header 并显示了一些内容。我的应用程序一次只会显示一个 window，所以我将它放在我的应用程序的根目录中，只在需要时更改其内容。
因为我需要能够从应用程序的不同位置设置 window 内容，所以我创建了一个我的组件绑定到的服务。这样我就可以从我需要的任何地方调用服务的方法，并更改 window 组件的属性。
但是，我不知道如何使用该服务来指定要显示为 window 内容的组件实例。我能以某种方式例如以编程方式为 window 组件设置 ng-content?
我目前的解决方法是在 window 组件中指定所有可能的内容，然后使用 *ngIf 选择正确的内容，如下所示：
<contentA *ngIf="windowService.getContent()='a'"></contentA>
<contentB *ngIf="windowService.getContent()='b'"></contentB>
<contentC *ngIf="windowService.getContent()='c'"></contentC>
它运行良好，但列表越来越长且难以维护。我也不喜欢将我的 window 组件与所有这些实际上无关的组件结合在一起。此外，每个不同的内容都有自己的输入参数，现在 window-service 和 -component 也需要跟踪这些参数...
所以我的问题是； angular 中是否有我不知道的功能可以解决此类问题，或者我应该以其他方式处理它？
我想到的是在 window 组件中放置一个 ng-content 标签，并以某种方式让服务用我需要的内容替换该标签。或者我应该在我的 window 组件中放置一个 router-outlet 吗？我也不喜欢这种方法，因为更改内容不应算作导航。我已经有一个与这个组件无关的出口。
您当前的方法确实效率低下并且难以扩展。
你应该看看 Angular's Dynamic Components
希望对您有所帮助。
更新 请注意，在大多数情况下路由将是您所需要的。动态组件非常适合（顾名思义）动态内容，您不想在其中更改应用程序状态（即 url）。我向您推荐 Dynamic Components 的原因是因为您提到您已经在使用路由器并且正在寻找不同的解决方案（尽管从技术上讲您可以拥有嵌套路由甚至弹出路由）。
I have created a simple window component that has a header and shows some content. My app will only ever show one window at a time, so I placed it in the root of my app and only change its contents when needed.
主要的 Angular 功能就是路由器，其目的就是为了这个场景。其目的是在 header 和页脚中路由特定组件。
例如，这是我的主页及其 header 和菜单。它当前路由到电影列表组件，因此在菜单下显示它：
如果用户单击特定产品，路由 自动 将电影列表组件替换为适当的移动详细信息组件：
这与您需要做的匹配吗？
我创建了一个简单的 window 组件，它有一个 header 并显示了一些内容。我的应用程序一次只会显示一个 window，所以我将它放在我的应用程序的根目录中，只在需要时更改其内容。
因为我需要能够从应用程序的不同位置设置 window 内容，所以我创建了一个我的组件绑定到的服务。这样我就可以从我需要的任何地方调用服务的方法，并更改 window 组件的属性。
但是，我不知道如何使用该服务来指定要显示为 window 内容的组件实例。我能以某种方式例如以编程方式为 window 组件设置 ng-content?
我目前的解决方法是在 window 组件中指定所有可能的内容，然后使用 *ngIf 选择正确的内容，如下所示：
<contentA *ngIf="windowService.getContent()='a'"></contentA>
<contentB *ngIf="windowService.getContent()='b'"></contentB>
<contentC *ngIf="windowService.getContent()='c'"></contentC>
它运行良好，但列表越来越长且难以维护。我也不喜欢将我的 window 组件与所有这些实际上无关的组件结合在一起。此外，每个不同的内容都有自己的输入参数，现在 window-service 和 -component 也需要跟踪这些参数...
所以我的问题是； angular 中是否有我不知道的功能可以解决此类问题，或者我应该以其他方式处理它？
我想到的是在 window 组件中放置一个 ng-content 标签，并以某种方式让服务用我需要的内容替换该标签。或者我应该在我的 window 组件中放置一个 router-outlet 吗？我也不喜欢这种方法，因为更改内容不应算作导航。我已经有一个与这个组件无关的出口。
您当前的方法确实效率低下并且难以扩展。
你应该看看 Angular's Dynamic Components
希望对您有所帮助。
更新 请注意，在大多数情况下路由将是您所需要的。动态组件非常适合（顾名思义）动态内容，您不想在其中更改应用程序状态（即 url）。我向您推荐 Dynamic Components 的原因是因为您提到您已经在使用路由器并且正在寻找不同的解决方案（尽管从技术上讲您可以拥有嵌套路由甚至弹出路由）。
I have created a simple window component that has a header and shows some content. My app will only ever show one window at a time, so I placed it in the root of my app and only change its contents when needed.
主要的 Angular 功能就是路由器，其目的就是为了这个场景。其目的是在 header 和页脚中路由特定组件。
例如，这是我的主页及其 header 和菜单。它当前路由到电影列表组件，因此在菜单下显示它：
如果用户单击特定产品，路由 自动 将电影列表组件替换为适当的移动详细信息组件：
这与您需要做的匹配吗？