我的Angular应用需要两列，但其中的内容可能会根据路线而有很大差异。 如何设置组件？

Question

我的应用程序将始终需要两列：一列比另一列小。 当前，在我的主要应用程序组件中，模板只是<router-outlet></router-outlet> 。

当前，我的每条路线都指向一个不同的组件，并且这些组件中的每一个都在自己的模板中为我的两列提供标记。 但是，由于我的两个列在整个应用程序中将保持静态，因此对我而言，在根应用程序级别为这些列提供模板是有意义的。 这似乎更具模块化，并且不会在整个应用程序的模板中产生重复的标记。

这是我想要在根目录中使用的模板的想法-现在此标记存在于我路由到的每个组件中：

<div id="main-container">
    <div class="col three">

    </div>
    <div class="col nine">

    </div>
</div>

我感觉这是我将使用ngTemplateOutlet或使用“选择”的ngContent投影的地方，但是我不确定这些东西是否适用于我的情况。 我对ng-template的了解越多，似乎就越困惑。 我可以将此模板定义为TemplateRef并以某种方式在子组件中对其进行访问吗？

有人可以针对这种情况提供适当的设计策略吗？

Answer 1

我想我已经找到了解决方案。

我的主应用程序仍然仅具有<router-outlet></router-outlet>作为模板。 然后，我制作了一个新组件，专门用于用两列设置​​主模板。 我正在将ng-content与select一起使用，以将我的内容投影到适当的区域。

内容component.ts

<div id="main-container">
    <div class="col three">  
        <ng-content select="[leftColumn]"></ng-content>
    </div>
    <div class="col nine">
        <ng-content select="[rightColumn]"></ng-content>
    </div>
</div>

然后在每个路由组件中，将它们包装在模板组件中，如下所示：

X-component.ts

<app-content-component>
    <div leftColumn>This is left content for x component</div>
    <div rightColumn>This is right content for x component</div>
</app-content-component>

我愿意寻求更好的解决方案。 我不一定非要使用一个全新的组件来执行此操作，并且我不希望我必须确保在应用程序中的每个模板中都使用此组件，但是目前至少它允许我进行标记和样式设置仅在一个位置更改我的列。

Answer 2

如果您有两列，并且每一列都应基于路由器，则可以订阅router.events ，然后动态加载组件：

1. 在控制器中添加一些逻辑

    myComponentLeft: any; myComponentRight: any; this.router.events.subscribe( (event : Event) => { if (event instanceof NavigationEnd) { // logic here. example: this.myComponentLeft = UsersComponent; this.myComponentRight = ProfileComponent; } }); 

2. html中的NgComponentOutlet

    <ng-container *ngComponentOutlet="myComponentLeft"></ng-container> <ng-container *ngComponentOutlet="myComponentRight"></ng-container> 

如果需要将参数传递给动态组件，请使用ComponentFactoryResolver而不是ngComponentOutlet

Answer 3

我认为maxime1992对辅助路线的评论是个好主意。 话虽这么说，如果您的任一列都具有影响另一列的任何功能，仅将标记粘贴复制到几页上可能会少很多。

如果您具有Aux路由并且两列之间存在大量交互，则可能必须将大量代码重构为服务，或者使用事件@Output来使渲染系统正常工作。