我的 Angular 应用程序需要两列，但这些列的内容可能会因路线而异.如何设置组件?

Question

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

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

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

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

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

谁能为这种情况提供适当的设计策略建议？

Answer 1

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

我的主应用程序仍然只是模板<router-outlet></router-outlet>。然后，我专门创建了一个新组件，用于设置具有两列的主模板。我正在使用ng-content和select将我的内容投影到适当的区域。

content-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

如果您有 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. NgComponentOutlet from your html

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

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

Answer 3

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

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