AngularDart：如何根据导航更改部分布局？

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>

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

Answer 1

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

其他框架通过 "named" 路由器插座支持此功能。这允许多个插座存在于同一视图中，前提是它们被赋予了唯一的名称。然后每个路由配置必须指定哪个组件在哪个命名出口中呈现。如果这听起来合意，请随时提交功能请求：https://github.com/dart-lang/angular

当然，您始终可以编写自己的解决方案。您可以为 header 部分创建一个组件，根据激活的路由动态加载不同的组件。它只需要注入 Router 并监听 Router.stream 路由变化。

AngularDart：如何根据导航更改部分布局？

AngularDart: How to change partial parts of layout based on navigation?

dart

angular-ui-router

angular-dart

angular-dart-routing