时间戳

首页 > 解决方案 > 我的 Angular 应用程序需要两列，但它们的内容可能会因路线而异。如何设置组件？

javascript - 我的 Angular 应用程序需要两列，但它们的内容可能会因路线而异。如何设置组件？

问题描述

我的应用程序总是需要两列：一列比另一列小一点。目前在我的主要应用程序组件中，模板只是<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 并以某种方式在子组件中访问它吗？

任何人都可以就这种情况的正确设计策略提出建议吗？

标签： javascriptangulartemplatesviewchildng-template

解决方案

我想我找到了解决办法。

我的主要应用程序仍然只是<router-outlet></router-outlet>一个模板。然后我制作了一个新组件，专门用于设置包含两列的主模板。我正在使用ng-contentwithselect将我的内容投射到适当的区域。

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

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

推荐阅读