我的 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

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

在你的控制器中加入一些逻辑

myComponentLeft: any;
myComponentRight: any;

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

来自您的 html

的 NgComponentOutlet

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

如果需要给动态组件传递参数，使用ComponentFactoryResolver instead of ngComponentOutlet

Answer 2

我想我找到了解决办法。

我的主应用程序仍然只有 <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 3

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

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

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

My Angular app needs two columns, but the content of those can vary significantly based on the route. How do I approach setting up my components?

javascript

angular

templates

viewchild

ng-template