如何封装组件（工具栏）的内容来防止组件（工具栏）成为单体？

Question

我当前应用的工具栏代码有问题。

我的工具栏覆盖了整个应用程序。 这意味着工具栏显示在每一页上。 因此，工具栏只是我的根模板 ( app.component.html ) 的一部分，所有其他页面（组件）都由router-outlet延迟加载。 好处是避免了我的工具栏的整个 DOM 更新。

app.component.html :

<my-toolbar></my-toolbar>
<router-outlet></router-outlet> <!-- loads specific pages lazy -->

但是现在有一个大问题。 my-toolbar.component.html的视图内容（图标、文本、边距、顺序等）在每个页面上都略有不同。 显示的数据由服务处理。 所以我的工具栏组件变成了一个非常大的单体式结构。 关于路线，有一个像程序一样的大开关案例来找出工具栏中显示的内容...... :-(

我的目标是在my-toolbar.component.html保留一般视图内容，并且特定页面应该使用<ng-content> “注入”特定视图内容。 但是，只有将<my-toolbar></my-toolbar>直接放在页面模板中时，才能使用<ng-content>例如：

<my-toolbar>
  <!-- specific content -->
</my-toolbar>

在较低级别的页面组件级别，我无法访问较高级别的工具栏组件。 还有没有办法将特定内容从页面组件“注入”到更高层的工具栏组件？ 注意：我想避免 CSS hacks，比如负边距、定位等。

我希望我的英语不好被理解。 ó.Ò

Answer 1

根据我在这里读到的内容，我认为最好的方法是利用嵌套的路由出口。

例如，应用程序页面将更改为包含根路由器出口

<router-outlet></router-outlet> 

页面将包含嵌套的路由器出口。

例如，一页会像

<my-toolbar>
    <custom-page-one-content></custom-page-one-content>
</my-toolbar>
<router-outlet></router-outlet> 

另一个页面会像

<my-toolbar>
    <custom-page-two-content></custom-page-two-content>
</my-toolbar>
<router-outlet></router-outlet> 

这将导致良好的模块化，并可能改进延迟加载。