angular-ui-router - 角 Dart : How to change partial parts of layout based on navigation?

Question

假设我的 app_component.html 中有这个简单的脚手架:

<header>
    <div>
        <!-- here I have some elements that won't change -->
    </div>
    <div>
        <!-- SECTION HEADER: but I want to change this part's content, based on
             navigation or something else (auth roles, for example) -->
    </div>
</header>

<main>
    <div class="container">
        <div class="row">
            <div class="col s12">
                <section class="section">
                    <router-outlet>
                        <!-- SECTION MAIN: main content goes here -->
                    </router-outlet>
                </section>
            </div>
        </div>
    </div>
</main>
<div class="divider"></div>
<footer>
    <div>
        some footer here. nothing important
    </div>
</footer>

正如您在片段中看到的，我使用的是 <router-outlet>在 主要部分 显示内容很好。问题是，我怎样才能在标题部分(代码中的 SECTION HEADER )中有一个可更改的部分，以及如何根据例如更改它的内容。导航、身份验证角色等？是否 AngularDart支持这种路由吗？提前致谢。

Answer 1

简短的回答是否定的，路由器目前不支持轻松执行此操作。

其他框架通过“命名”路由器导出支持此功能。这允许多个导出存在于同一个 View 中，只要它们被赋予唯一的名称。然后，每个路由配置必须指定在哪个命名导出中呈现哪个组件。如果这听起来很可取，请随时提交功能请求:https://github.com/dart-lang/angular

当然，您总是可以编写自己的解决方案。您可以为标题部分创建一个组件，该组件动态加载不同的组件，具体取决于哪个路由处于事件状态。它只需要注入(inject) Router并收听Router.stream用于路线变更。