javascript - 我的 Angular 应用程序需要两列，但这些列的内容可能会根据路线的不同而有很大差异。如何设置我的组件？

Question

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

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

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

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

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

    </div>
</div>

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

有人可以建议针对这种情况的正确设计策略吗？

Answer 1

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

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

内容组件.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-组件.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>

我愿意接受更好的解决方案。我不一定想要一个全新的组件来执行此操作，而且我不喜欢必须确保该组件在我的应用程序中的每个模板中使用，但现在它至少允许我进行标记和样式设置仅在一个位置更改我的列。