Angular 多重路由
<blockquote><p><strong>文中使用的工具或者包的版本：</strong>Angular CLI 11.0.6</p>
<p><strong>文中 Demo 链接：</strong>https://stackblitz.com/edit/angular-route-outlet-3crvst</p>
</blockquote>
<h4 id="配置">配置</h4>
<p>首先我们在模板中定义多个路由出口，比如：</p>
<pre><code class="language-html"><router-outlet></router-outlet>
<router-outlet name="second"></router-outlet>
<router-outlet name="third"></router-outlet>
</code></pre>
<p>注意路由出口的名称不能动态设置或更改。如果未设置，则默认值为 “primary”。</p>
<p>然后我们给每个路由出口配置对应的路由，比如：</p>
<pre><code class="language-typescript">const routes: Routes = [
{ path: "route1", component: Route1Component },
{ path: "route2", component: Route2Component },
{ path: "secondRoute1", component: SecondRoute1Component, outlet: "second" },
{ path: "secondRoute2", component: SecondRoute2Component, outlet: "second" },
{ path: "thirdRoute1", component: ThirdRoute1Component, outlet: "third" },
];
</code></pre>
<p>其中 outlet 属性用于标识目标出口。</p>
<h4 id="激活">激活</h4>
<p>现在我们可以在 outlets 中为对应的路由出口指定目标路由，指定为 null 时可关闭路由视图，比如：</p>
<pre><code class="language-html"><a ="[{outlets: { second: 'secondRoute1' }}]">second:secondRoute1</a>
<a ="[{outlets: { second: 'secondRoute2' }}]">second:secondRoute2</a>
<a ="[{outlets: { second: null }}]">second:null</a>
</code></pre>
<p>多重路由之间彼此互不依赖，上面的链接会改变 second 出口的路由视图，但主路由出口和 third 路由出口不受影响。除了动态路径，我们也可以用跳转到对应的 URL 的方法来激活它们。</p>
<h4 id="url">URL</h4>
<p>多重路由在 URL 的表现上由括号包装，比如：http://localhost:4200/route2(second:secondRoute1)。同一模板上有多个路由出口被激活时，URL 中以 // 分隔，父子路由上都有多重路由时就会出现多个括号包装的内容。在使用 URL 激活路由时要注意会不会弄丢其他路由出口的路由视图，正确的代码应该像这样：</p>
<pre><code class="language-typescript">this.router.navigateByUrl("/route2(second:secondRoute1)");
this.router.navigateByUrl("/route1/(childRoute1//second:childSecondRoute1)(second:secondRoute1//third:thirdRoute1)");
</code></pre><br><br>
来源：https://www.cnblogs.com/yshenhua/p/14674960.html
頁:
[1]