首页 › Angular论坛 › angular - 路由

胡挖 發表於 2023-2-14 22:42:00

angular - 路由

<p><img src="https://img2023.cnblogs.com/blog/196558/202309/196558-20230906230533876-2000815081.png" alt="" loading="lazy"></p>
<h1 id="路由配置">路由配置</h1>
<p>最简单，一个配置项包含了 <code>path</code> 和 <code>component</code> 两个属性</p>
<p><img src="https://img2023.cnblogs.com/blog/196558/202302/196558-20230212163521752-819235858.png" alt="" loading="lazy"></p>
<p><img src="https://img2023.cnblogs.com/blog/196558/202302/196558-20230212163359550-589853034.png" alt="" loading="lazy"></p>
<h2 id="创建根路由模块">创建根路由模块</h2>
<p>需要注意的是，根路由模块默认提供的路由策略为 <code>PathLocationStrategy</code> 。该策略要求应用必须设置一个 <code>base</code> 路径，用于作为前缀来生成和解析 URL 。设置 base 路径最简单的方式是在 <code>index.html</code> 文件中设置 <code>&lt;base&gt;</code> 元素的 href 属性。路由策略将会在下一节进行详细介绍。</p>
<h1 id="路由策略">路由策略</h1>
<p>Angular 提供了 PathLocationStrategy 和 HashLocationStrategy 两种路由策略，分别表示使用 URL 的 path 部分和 hash 部分来进行路由匹配。</p>
<blockquote>
<p>区别：</p>
<p>PathLocationStrategy 每次请求服务端，HashLocationStrategy 更改 URL 的 hash 部分不请求服务端。</p>
</blockquote>
<p><img src="https://img2023.cnblogs.com/blog/196558/202302/196558-20230212164920760-394215752.png" alt="" loading="lazy"></p>
<h2 id="pathlocationstrategy">PathLocationStrategy</h2>
<p>PathLocationStrategy 使用 URL 的 path 部分来进行路由匹配，因此与 HashLocationStrategy 的不同之处在于，浏览器会将配置项对应的 URL 原封不动地发送给服务器</p>
<p><img src="https://img2023.cnblogs.com/blog/196558/202302/196558-20230212170119265-923097926.png" alt="" loading="lazy"></p>
<p>要使用 <code>PathLocationStrategy</code> 路由策略，必须满足三个条件：<br>
第一，浏览器需要支持 HTML 5 的 <code>history.pushState()</code> 方法，正是这一方法使得 RouterLink 指令在跳转时即使更改了 URL 的 path 部分，也依然不会引起页面刷新。<br>
第二，需要在服务器上进行设置，将应用的所有 URL 重定向到应用的首页。这是因为该策略所生成的 URL （如 <code>http://localhost:3000/list</code>）在服务器上并不存在与其相对应的文件结构，如果不进行重定向，服务器将返回 404 错误。<br>
第三，需要为应用设置一个 base 路径， Angular 将以 base 路径为前缀来生成和解析 URL。这样做的好处是服务器可以根据 base 路径来区分来自不同应用的请求。如何在服务器上进行重定向设置超出了 Angular 的范畴，这里就不深入讲解了，接 下来只对设置 base 路径的两种方式加以介绍。</p>
<h2 id="hashlocationstrategy">HashLocationStrategy</h2>
<p><img src="https://img2023.cnblogs.com/blog/196558/202302/196558-20230212170422713-320358686.png" alt="" loading="lazy"></p>
<p>其原理是利用了浏览器在处理 hash 部分的两个特性。</p>
<p>第一，浏览器向服务器发送请求时不会带上 hash 部分的内容。如图 11-4 所示，如 果通讯录采用了 HashLocationStrategy，那么对于其所有配置项所对应的 URL，浏览器向 服务器发送的请求都为同一个，服务器只需要返回应用首页即可， Angular 在获取首页 后会根据 hash 的内容来匹配路由配置项并渲染相应的组件。</p>
<p>第二，更改 URL 的 hash 部分不会向服务器重新发送请求，这使得在进行跳转的时候不会引发页面的刷新和应用的重新加载。</p>
<p>可以在根模块的&nbsp;RouterModule.forRoot()&nbsp;的第二个参数中传入一个带有&nbsp;<code>useHash: true</code>&nbsp;的对象，以回到基于&nbsp;HashLocationStrategy 的传统方式。</p>
<pre><code class="language-typescript">@NgModule(
imports: ,
// ...
})
</code></pre>
<h1 id="设置通配符路由">设置通配符路由</h1>
<p>当用户试图导航到那些不存在的应用部件时，在正常的应用中应该能得到很好的处理。要在应用中添加此功能，需要设置通配符路由。当所请求的 URL 与任何路由器路径都不匹配时，Angular 路由器就会选择这个路由。</p>
<p>要设置通配符路由，请在&nbsp;<code>routes</code>&nbsp;定义中添加以下代码。</p>
<p><code>{ path: '**', component: &lt;component-name&gt; }</code></p>
<p>这两个星号&nbsp;<code>**</code>&nbsp;告诉 Angular，这个&nbsp;<code>routes</code>&nbsp;定义是通配符路由。对于 component 属性，你可以使用应用中的任何组件。常见的选择包括应用专属的&nbsp;<code>PageNotFoundComponent</code>，你可以定义它来向用户展示 404 页面，或者跳转到应用的主组件。通配符路由是最后一个路由，因为它匹配所有的 URL。关于路由顺序的更多详细信息，请参阅路由顺序。</p>
<h2 id="显示-404-页面">显示 404 页面</h2>
<p>要显示 404 页面，请设置一个通配符路由，并将&nbsp;<code>component</code>&nbsp;属性设置为你要用于 404 页面的组件，如下所示：</p>
<pre><code class="language-typescript">const routes: Routes = [
{ path: 'first-component', component: FirstComponent },
{ path: 'second-component', component: SecondComponent },
{ path: '**', component: PageNotFoundComponent },// Wildcard route for a 404 page
];
</code></pre>
<p><code>path</code>&nbsp;为&nbsp;<code>**</code>&nbsp;的最后一条路由是通配符路由。如果请求的 URL 与前面列出的路径不匹配，路由器会选择这个路由，并把该用户送到&nbsp;<code>PageNotFoundComponent</code>。</p>
<h1 id="设置重定向">设置重定向</h1>
<p>要设置重定向，请使用重定向源的&nbsp;<code>path</code>、要重定向目标的&nbsp;<code>component</code>&nbsp;和一个&nbsp;<code>pathMatch</code>&nbsp;值来配置路由，以告诉路由器该如何匹配 URL。</p>
<p>AppRoutingModule</p>
<pre><code class="language-typescript">const routes: Routes = [
{ path: 'first-component', component: FirstComponent },
{ path: 'second-component', component: SecondComponent },
{ path: '',   redirectTo: '/first-component', pathMatch: 'full' }, // redirect to `first-component`
{ path: '**', component: PageNotFoundComponent },// Wildcard route for a 404 page
];
</code></pre>
<p>在这个例子中，第三个路由是重定向路由，所以路由器会默认跳到&nbsp;<code>first-component</code>&nbsp;路由。注意，这个重定向路由位于通配符路由之前。这里的&nbsp;<code>path: ''</code>&nbsp;表示使用初始的相对 URL（<code>''</code>）。</p>
<p>关于&nbsp;<code>pathMatch</code>&nbsp;的详情，请参阅聚焦&nbsp;<code>pathMatch</code>部分。</p>
<h1 id="路由跳转">路由跳转</h1>
<h2 id="链接参数数组">链接参数数组</h2>
<p>链接参数数组保存路由导航时所需的成分：</p>
<ul>
<li>
<p>指向目标组件的那个路由的路径（path）</p>
</li>
<li>
<p>必备路由参数和可选路由参数，它们将进入该路由的 URL</p>
</li>
</ul>
<p>可以把&nbsp;<code>RouterLink</code>&nbsp;指令绑定到一个数组，就像这样：</p>
<pre><code class="language-html">&lt;a ="['/heroes']"&gt;Heroes&lt;/a&gt;
</code></pre>
<p>在指定路由参数时，使用如下的两元素数组：</p>
<pre><code class="language-html">&lt;a ="['/hero', hero.id]"&gt;
&lt;span class="badge"&gt;{{ hero.id }}&lt;/span&gt;{{ hero.name }}
&lt;/a&gt;

&lt;!--if hero.id = 1--&gt;
http://localhost:4200/hero/1
</code></pre>
<p>可以在对象中提供可选的路由参数，比如&nbsp;<code>{ foo: 'foo' }</code>&nbsp;：</p>
<pre><code class="language-html">&lt;a ="['/crisis-center', { foo: 'foo' }]"&gt;Crisis Center&lt;/a&gt;

http://localhost:4200/crisis-center;foo=foo
</code></pre>
<p>这三个例子涵盖了你在单级路由的应用中所需的一切。不过，在你添加一个像<em>危机中心</em>一样的子路由时，你可以创建新链接数组。</p>
<p>下面这个最小化&nbsp;<code>RouterLink</code>&nbsp;例子是基于危机中心指定的默认子路由构建的。</p>
<pre><code class="language-html">&lt;a ="['/crisis-center']"&gt;Crisis Center&lt;/a&gt;
</code></pre>
<p>查看以下内容：</p>
<ul>
<li>
<p>数组中的第一个条目标记出了父路由(<code>/crisis-center</code>)。</p>
</li>
<li>
<p>这个父路由没有参数。</p>
</li>
<li>
<p>没有默认的子路由，因此你得选取一个。</p>
</li>
<li>
<p>你决定跳转到&nbsp;<code>CrisisListComponent</code>，它的路由路径是'/'，但你不用显式的添加它。</p>
</li>
</ul>
<p>考虑以下路由器链接，它将从应用的根目录导航到巨龙危机（Dragon Crisis）：</p>
<pre><code class="language-html">&lt;a ="['/crisis-center', 1]"&gt;Dragon Crisis&lt;/a&gt;


http://localhost:4200/hero/1
</code></pre>
<ul>
<li>
<p>数组中的第一个条目标记出了父路由(<code>/crisis-center</code>)。</p>
</li>
<li>
<p>这个父路由没有参数。</p>
</li>
<li>
<p>数组中的第二个条目（'/:id'）用来标记出到指定危机的详情页的子路由。</p>
</li>
<li>
<p>详细的子路由需要一个&nbsp;<code>id</code>&nbsp;路由参数。</p>
</li>
<li>
<p>你把<em>巨龙危机</em>的&nbsp;<code>id</code>&nbsp;添加为该数组中的第二个条目（<code>1</code>）。</p>
</li>
<li>
<p>最终生成的路径是&nbsp;<code>/crisis-center/1</code>。</p>
</li>
</ul>
<p>你也可以把危机中心的路由单独重新定义为&nbsp;<code>AppComponent</code>&nbsp;的模板：</p>
<pre><code class="language-html">template: `
&lt;h1 class="title"&gt;Angular Router&lt;/h1&gt;
&lt;nav&gt;
    &lt;a ="['/crisis-center']"&gt;Crisis Center&lt;/a&gt;
    &lt;a ="['/crisis-center/1', { foo: 'foo' }]"&gt;Dragon Crisis&lt;/a&gt;
    &lt;a ="['/crisis-center/2']"&gt;Shark Crisis&lt;/a&gt;
&lt;/nav&gt;
&lt;router-outlet&gt;&lt;/router-outlet&gt;
`
</code></pre>
<p>总之，你可以用一级、两级或多级路由来写应用程序。链接参数数组提供了用来表示任意深度路由的链接参数数组以及任意合法的路由参数序列、必须的路由器参数以及可选的路由参数对象。</p>
<h2 id="使用指令跳转">使用指令跳转</h2>
<h3 id="routerlink">RouterLink</h3>
<p>指令跳转通过使用 RouterLink 指令来完成。该指令接收一个链接参数数组， Angular 将根据该数组来生成 UrlTree 实例进行跳转。</p>
<p><strong>ts</strong></p>
<pre><code class="language-typescript">import { ContentComponent } from './share/content/content.component';
import { ListComponent } from './share/list/list.component';

const rootRouterConfig: Routes = [
{ path:'', component: ContentComponent },
{ path:'list', component: ListComponent },
{ path:'content', component: ContentComponent },
];
</code></pre>
<p><strong>html</strong></p>
<pre><code class="language-html">&lt;nav&gt;
    &lt;!-- http://localhost:4200/collection --&gt;
    &lt;a ="['/content']"&gt;
      &lt;i&gt;content&lt;/i&gt;
    &lt;/a&gt;
    &lt;!-- http://localhost:4200/list --&gt;
    &lt;a ="['/list']"&gt;
      &lt;i&gt;list&lt;/i&gt;
    &lt;/a&gt;
&lt;/nav&gt;
</code></pre>
<h3 id="直接-href-的结果">直接 href 的结果</h3>
<p>如果不借助于 RouterLink 指令而以纯 HTML 的方式来定义超链接，所导致的结果是<code>单击超链接后会使得整个页面被重新加载</code>。</p>
<pre><code class="language-html">&lt;nav&gt;
&lt;a href="/collection"&gt;
    &lt;i&gt;content&lt;/i&gt;
&lt;/a&gt;
&lt;a href="/list"&gt;
    &lt;i&gt;list&lt;/i&gt;
&lt;/a&gt;
&lt;/nav&gt;
</code></pre>
<h3 id="routerlink-不重新加载原因">RouterLink 不重新加载原因</h3>
<p>Angular 通过以下两个步骤来保证在不重新加载应用的情况下完成跳转。</p>
<ul>
<li>
<p>在 click 事件中调用 preventDefault() 方法来禁止单击 <code>&lt;a&gt;</code> 标签后向服务器发送请求的行为，从而避免了跳转加载。</p>
</li>
<li>
<p>调用 Router.navigateByUrl() 方法来启动跳转流程。</p>
</li>
</ul>
<pre><code class="language-typescript">@HostListener('click', ['$event.button', '$event.ctrlKey', '$event.metaKey'])
onClick(button: number, ctrlKey: boolean, metaKey: boolean): boolean {
//...
this.router.navigateByUrl(this.urlTree); // 跳转到指定页面，渲染相应组件
return false; // 当 HostListener 装饰的回调函数返回 false 时，
// Angular 会调用 `preventDefault()` 方法
}
</code></pre>
<h3 id="不依赖超链接-a-标签">不依赖超链接 a 标签</h3>
<p>RouterLink 指令的另一个强大之处在于它可以被应用在任何 HTML 元素上，使得页面跳转不需要依赖超链接。</p>
<pre><code class="language-html">&lt;button ="['/list']"&gt;
&lt;i&gt;list&lt;/i&gt;
&lt;/button&gt;
</code></pre>
<h3 id="routerlinkactive-指令">RouterLinkActive 指令</h3>
<p>当 RouterLink 被激活时，还可以通过 <code>RouterLinkActive</code> 指令为其相应的 HTML元素指定 CSS 类。</p>
<p>下面的例子定义了一个 CSS 类 <code>.active</code> ，并通过 routerLinkActive 将其赋给 <code>list</code> 的链接。当单击该链接后， .active 类将被应用到 <code>&lt;a&gt;</code> 标签上。</p>
<pre><code class="language-html">&lt;nav&gt;
    &lt;!-- http://localhost:4200/collection --&gt;
    &lt;a ="['/content']" routerLinkActive="active"&gt;
      &lt;i&gt;content&lt;/i&gt;
    &lt;/a&gt;
    &lt;!-- http://localhost:4200/list --&gt;
    &lt;a ="['/list']" routerLinkActive="active"&gt;
      &lt;i&gt;list&lt;/i&gt;
    &lt;/a&gt;
&lt;/nav&gt;
</code></pre>
<p><img src="https://img2023.cnblogs.com/blog/196558/202302/196558-20230212230630017-1990348570.png" alt="" loading="lazy"></p>
<h2 id="使用代码跳转">使用代码跳转</h2>
<p>跳转流程是通过调用 <code>Router.navigateByUrl()</code> 方法来启动的。 RouterLink 指令仅响应 click 事件，如果需要响应其他事件或者需要根据运行时的数据动态决定如何跳转，则可以通过调用 Router.navigateByUrl() 或其兄弟方法 <code>Router.navigate()</code> 来完成。</p>
<pre><code class="language-typescript">setTimeout(()=&gt;{
_router.navigateByUrl('/content');
// 或者执行： _router.navigate(['/content']);
}, 1000);
</code></pre>
<p>还支持用 extras 参数定义跳转的具体行为。例如，如果想在不改变 URL 的情况下完成跳转</p>
<pre><code class="language-typescript">_router.navigateByUrl('/collection', {skipLocationChange: true});
</code></pre>
<blockquote>
<p>基于所提供的 URL 进行导航，必须使用绝对路径。See also: 路由和导航指南</p>
<pre><code class="language-typescript">navigateByUrl(url: string | UrlTree, extras: NavigationBehaviorOptions = {
    skipLocationChange: false
}): Promise&lt;boolean&gt;
</code></pre>
<h6 id="参数">参数</h6>
<table>
<thead>
<tr>
<th><code>url</code></th>
<th>string | UrlTree</th>
<th>一个绝对 URL。该函数不会对当前 URL 做任何修改。</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>extras</code></td>
<td>NavigationBehaviorOptions</td>
<td>一个包含一组属性的对象，它会修改导航策略。 该函数会忽略&nbsp;NavigationExtras&nbsp;中任何可能会改变所提供的 URL 的属性可选值。默认值为 <code>{ skipLocationChange: false }</code>。</td>
</tr>
</tbody>
</table>
<h6 id="返回值">返回值</h6>
<p>一个 Promise，当导航成功时，它会解析成&nbsp;<code>true</code>；导航失败或出错时，它会解析成&nbsp;<code>false</code>。</p>
</blockquote>
<h1 id="获取路由信息">获取路由信息</h1>
<p>要从路由中获取信息：</p>
<ol>
<li>把&nbsp;ActivatedRoute&nbsp;和&nbsp;ParamMap&nbsp;导入你的组件。</li>
</ol>
<pre><code class="language-typescript">import { Router, ActivatedRoute, ParamMap } from '@angular/router';
</code></pre>
<p>这些&nbsp;<code>import</code>&nbsp;语句添加了组件所需的几个重要元素。要详细了解每个 API，请参阅以下 API 页面：</p>
<ul>
<li>
<p><code>Router</code></p>
</li>
<li>
<p><code>ActivatedRoute</code></p>
</li>
<li>
<p><code>ParamMap</code></p>
</li>
</ul>
<ol start="2">
<li>通过把&nbsp;ActivatedRoute&nbsp;的一个实例添加到你的应用的构造函数中来注入它：</li>
</ol>
<pre><code class="language-typescript">constructor(
private route: ActivatedRoute,
) {}
</code></pre>
<ol start="3">
<li>更新&nbsp;<code>ngOnInit()</code>&nbsp;方法来访问这个&nbsp;ActivatedRoute 并跟踪&nbsp;<code>name</code>&nbsp;参数：</li>
</ol>
<pre><code class="language-typescript">ngOnInit() {
this.route.queryParams.subscribe(params =&gt; {
this.name = params['name'];
});
}
</code></pre>
<p><strong>注意</strong>：<br>
前面的例子使用了一个变量&nbsp;<code>name</code>，并根据&nbsp;<code>name</code>&nbsp;参数给它赋值。</p>
<h2 id="路由器状态">路由器状态</h2>
<p>每个成功的导航生命周期结束后，路由器都会构建一个&nbsp;ActivatedRoute&nbsp;对象树，它构成了路由器的当前状态。你可以从任何地方使用应用的&nbsp;Router 服务和&nbsp;<code>routerState</code>&nbsp;属性来访问当前的&nbsp;RouterState。</p>
<p>RouterState&nbsp;中的每个&nbsp;ActivatedRoute&nbsp;都提供了向上或向下遍历路由树的方法，用于从父路由、子路由和兄弟路由中获取信息。</p>
<hr>
<h1 id="路由参数">路由参数</h1>
<h2 id="path-参数动态参数"><strong>Path</strong> 参数（动态参数）</h2>
<p><img src="https://img2023.cnblogs.com/blog/196558/202306/196558-20230622220901490-2114108651.png" alt="" loading="lazy"></p>
<p>在定义一个配置项的 path 属性时，可以使用“<code>/</code>”字符来对 path 属性进行分段，如果一个分段以 “<code>:</code>” 字符开头，则 URL 中与该分段进行匹配的部分将作为参数传递到组件中。</p>
<p>下面的代码为联系人详情页的路由配置项，其定义了一个名为 id 的 Path 参数，对于 <code>http://localhost:3000/detail/1</code>，参数 id 的值为 1；对于 <code>http://localhost:3000/detail/2</code>，参数 id 的值则 为 2；依此类推。</p>
<pre><code class="language-typescript">export const ContactsAppRouters: RouterConfig = [
{ path: 'detail/:id', component: DetailComponent }
];
</code></pre>
<blockquote>
<p>只有当 URL 解析出来的分段数和 path 属性的分段数一致时，才能匹配到该配置项</p>
<p><code>http://localhost:3000/detail</code> ＃分段数为1<br>
<code>http://localhost:3000/detail/1/segment</code> ＃分段数为3</p>
</blockquote>
<p>给路由参数赋值，除可以直接在浏览器地址栏中输入 URL 外，还可以通过 RouterLink 指令或者跳转方法来完成：</p>
<pre><code class="language-typescript">// Angular 会将链接参数数组的每一个非对象元素当成一个分段进行拼接，
// 因此下面的链接参数数组对应的 path 为 `detail/1`
&lt;a ="['/detail', 1]"&gt;
_router.navigate(['/detail', 1]);
// 或者直接指定 path
_router.navigateByUrl('detail/1');
</code></pre>
<h3 id="例子1">例子1：</h3>
<p>Angular 应用从一个页面跳转到另一个新的页面，实质上是从一个配置项跳转到另一个配置项。在这个过程中， Angular 除会为配置项所对应的组件创建实例外，还会为该配置项本身创建一个 ActivatedRoute 实例来表示该配置项已被激活。该 ActivatedRoute 实例包含了一个快照（即 <code>snapshot</code> 属性），记录了从当前 URL 中解析出来的所有 Path 参数。下面展示了通讯录例子中的 DetailComponent 组件是如何通过快照来获取 Path 参数 的。示例代码如下：</p>
<pre><code class="language-typescript">// detail.component.ts
// 1. 导入 ActivatedRoute 服务
import { ActivatedRoute } from '@angular/router';
// ...
export class DetailComponent implements OnInit, OnDestroy {
    contact_id: string;
    constructor( private _activatedRoute:ActivatedRoute ) {
    console.log('创建 DetailComponent 组件实例');
    }
    ngOnInit() {
    // 2. 通过快照获取 Path 参数
    this.contact_id = this._activatedRoute.snapshot.params['id'];
    console.log('参数id的值为： '+this.contact_id);
    }
    //...
}
</code></pre>
<p>创建 DetailComponent 组件实例<br>
参数id的值为： 1</p>
<h3 id="例子2">例子2：</h3>
<p>接下来介绍如何在通讯录例子页面跳转时获取参数值。首先在联系人详情组件的模板 detail.component.html 上添加一个链接，希望达到的效果是当单击该链接后，能够显示下一名联系人的信息。</p>
<pre><code class="language-html">&lt;!-- detail.component.html --&gt;
&lt;div class="detail-contain"&gt;
&lt;div class="header-detail"&gt;
&lt;a ="['']" class="back-to-list"&gt;
&lt;i class="icon-back"&gt;&lt;/i&gt;
所有联系人
&lt;/a&gt;
&lt;a ="['/detail', nextContactId()]" class="back-to-list"&gt;
下一联系人
&lt;/a&gt;
&lt;!-- ... --&gt;
&lt;/div&gt;
&lt;!-- ... --&gt;
&lt;/div&gt;
</code></pre>
<p><code>nextContactId()</code> 方法通过简单地加 1 来获取下一名联系人的 id ：</p>
<pre><code class="language-typescript">// detail.component.ts
// ...
export class DetailComponent implements OnInit, OnDestroy {
//...
nextContactId() {
    return parseInt(this.contact_id) + 1;
}
}
</code></pre>
<h3 id="例子3">例子3：</h3>
<p>假设当前 URL 为 <code>http://localhost:3000/detail/1</code>，在单击“下一联系人”链接后, URL 按照预期变成了 <code>http://localhost:3000/detail/2</code>，但是页面上显示的仍然是原先联系人的信息。这是因为 Angular 在处理同一页面内跳转时，不会重新创建组件的实例，所以组件的构造函数和 ngOnInit() 方法都没有被调用到。虽然 Angular 会将快照中参数 id 的值更新为 2，但没有将这个更新通知到组件。为了解决这个问题， ActivatedRoute 服务提供了一个 Observable 对象，允许对参数的更新进行订阅。示例代码如下：</p>
<pre><code class="language-typescript">// detail.component.ts
// ...
export class DetailComponent implements OnInit, OnDestroy {
contact_id: string;
private sub: any;
//...
ngOnInit() {
    this.sub = this._activatedRoute.params.subscribe(params =&gt; {
    this.contact_id = params['id'];
    console.log('参数id的值为： '+this.contact_id);
    this.getById(this.contact_id);
    });
}
ngOnDestroy() {
    // 为了避免内存泄漏，在组件销毁时应该取消订阅
    this.sub.unsubscribe();
}
//...
}
</code></pre>
<p>此时单击链接，便可以显示出下一位联系人的信息</p>
<h2 id="query-参数查询参数"><strong>Query</strong> 参数（查询参数）</h2>
<p><img src="https://img2023.cnblogs.com/blog/196558/202306/196558-20230622220721314-347685628.png" alt="" loading="lazy"></p>
<p>我们也可以通过解析 URL 的 query 部分来获取参数值。由于 URL 的 query 部分不用于和配置项进行匹配，因此每一个配置项都可以拥有任意多个查询参数。下面的 URL 给联系人列表页定义了一个查询参数，表示只希望在页面上显示 5 位联系人。</p>
<pre><code>http://localhost:3000/list?limit=5
</code></pre>
<p>Query 参数同样可以通过 <code>RouterLink</code> 指令或者跳转方法来赋值</p>
<pre><code class="language-typescript">&lt;a ="['/list']" ="{limit: 5}"&gt;

this._router.navigate(['/list'], {queryParams: {limit: 5}});
this._router.navigateByUrl('/list?limit=5');
</code></pre>
<p>Query 参数的获取，需要借助于 ActivatedRoute 服务提供的 Observable 类型对象 <code>queryParams</code> 来完成。</p>
<h3 id="例子4">例子4：</h3>
<p>下面的代码通过获取 Query 参数来对显示在页面上的联系人数目进行限制</p>
<pre><code class="language-typescript">// list.component.ts
import { ActivatedRoute } from '@angular/router';
//...
export class ListComponentimplements OnInit, OnDestroy {
contacts: any[];
private limit: number;
private sub: any;
constructor(private _activatedRoute: ActivatedRoute) { }
ngOnInit() {
    this.getContacts();
}
ngOnDestroy() {
    this.sub.unsubscribe();
}
getContacts() {
    //...
    this.sub = this._activatedRoute.queryParams.subscribe(params =&gt; {
      this.limit = parseInt(params['limit']);
      if (this.limit) {
      this.contacts.splice(this.limit);
      }
    });
}
//...
}
</code></pre>
<h2 id="matrix-参数一般不用"><strong>Matrix</strong> 参数（一般不用）</h2>
<p>页面上所有组件都可以访问 Query 参数的内容，如果想精准地向某一个组件传递参数，则需要使用 Matrix 参数。</p>
<blockquote>
<p>虽然 Matrix 写法未曾进入过 HTML 标准，但它是合法的。而且在浏览器的路由系统中，它作为从父路由和子路由中单独隔离出参数的方式而广受欢迎。Angular 的路由器正是这样一个路由系统，并支持跨浏览器的 Matrix 写法。</p>
</blockquote>
<pre><code class="language-html">&lt;a ="['/detail', this.contact_id, {after:'2015-01-01', before
:'2015-12-31'}, 'album', {after:'2016-01-01', before:'2016-12-31'}]"&gt;Link&lt;/a&gt;
</code></pre>
<p>Angular 会将该对象的属性转化为以“ ;”为分隔符的键值对，拼接到与该对象左边最近的 URL 分段上。依据上述链接参数数组生成的 URL 如下， DetailComponent 组件和 AlbumComponent 组件都将获得不同的参数值：</p>
<pre><code>http://localhost:3000/detail/6;after=2015-01-01;before=2015-12-31/album;after=2016-01-01;before=2016-12-311
</code></pre>
<p>这种在一个 URL 分段内使用“ ;”分隔键值对的方式称为 Matrix URI，由互联网之父 Tim Berners-Lee 于 1996 年提出。根据其定义，每一个 URL 分段都可以拥有任意多个键值对，每个键值对只为其所在的分段服务。虽然 Matrix URI 一直没有进入 HTML 标准，但它能够清晰地表示出每一个 URL 分段所具有的键值对。 Angular 利用这个特性，将 Matrix 参数精准地传递给分段所对应的组件。 Matrix 参数的获取方式和 Path 参数一样，可以通过 ActivatedRoute 服务提供的快照和 Observable 对象两种方式来获取，在此不再赘述</p>
<h2 id="activatedroute-的4个参数的区别-param-queryparams-parammap-queryparammap">ActivatedRoute 的4个参数的区别： param, queryParams, paramMap, queryParamMap</h2>
<p><img src="https://img2023.cnblogs.com/blog/196558/202309/196558-20230903222500973-1409380713.png" alt="" loading="lazy"></p>
<p><code>ActivatedRoute</code>&nbsp;是 Angular 的一个服务，它提供了对路由信息的访问。每个属性都有其特定的用途。</p>
<ol>
<li><code>params</code>: 这个属性是一个&nbsp;<code>Params</code>，包含了当前路由的路径参数。路径参数是通过在路由路径中使用冒号（:）来定义的，例如在&nbsp;<code>/user/:id</code>&nbsp;中，<code>id</code>&nbsp;就是一个路径参数。你可以通过这个属性来获取这个参数的值。</li>
<li><code>queryParams</code>: 这个属性也是一个&nbsp;<code>Params</code>，包含了当前 URL 的查询参数。查询参数是在 URL 的问号（?）之后的部分，例如在&nbsp;<code>/path?param1=value1&amp;param2=value2</code>&nbsp;中，<code>param1</code>&nbsp;和&nbsp;<code>param2</code>&nbsp;就是查询参数。</li>
<li><code>paramMap</code>: 这个属性也是一个&nbsp;<code>ParamMap</code>，与&nbsp;<code>params</code>&nbsp;类似，但是它提供了更灵活的方法来处理和解析参数。你可以使用&nbsp;<code>paramMap.get(name)</code>&nbsp;来获取特定的参数。</li>
<li><code>queryParamMap</code>: 这个属性是一个&nbsp;<code>ParamMap</code>，与&nbsp;<code>queryParams</code>&nbsp;类似，但是它也提供了更灵活的方法来处理和解析参数。你可以使用&nbsp;<code>queryParamMap.get(name)</code>&nbsp;来获取特定的查询参数。</li>
</ol>
<p>什么时候使用这些属性取决于你的需求。如果你只需要访问路径参数，你可以使用&nbsp;<code>params</code>&nbsp;和&nbsp;<code>paramMap</code>。如果你需要访问查询参数，你可以使用&nbsp;<code>queryParams</code>&nbsp;和&nbsp;<code>queryParamMap</code>。这些属性在导航到不同的路由或者在处理用户输入时特别有用。</p>
<hr>
<h1 id="子路由和附属-outlet">子路由和附属 <strong>Outlet</strong></h1>
<h2 id="嵌套路由">嵌套路由</h2>
<p>随着你的应用变得越来越复杂，你可能要创建一些根组件之外的相对路由。这些嵌套路由类型称为子路由。这意味着你要为你的应用添加第二&nbsp;<code>&lt;router-outlet&gt;</code>，因为它是&nbsp;<code>AppComponent</code>&nbsp;之外的另一个&nbsp;<code>router-outlet</code>。</p>
<p>在这个例子中，还有两个子组件，<code>child-a</code>&nbsp;和&nbsp;<code>child-b</code>。这里的&nbsp;<code>FirstComponent</code>&nbsp;有它自己的&nbsp;<code>&lt;nav&gt;</code>&nbsp;和&nbsp;<code>AppComponent</code>&nbsp;之外的第二&nbsp;<code>router-outlet</code>。</p>
<pre><code class="language-html">&lt;h2&gt;First Component&lt;/h2&gt;

&lt;nav&gt;
&lt;ul&gt;
    &lt;li&gt;&lt;a routerLink="child-a"&gt;Child A&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a routerLink="child-b"&gt;Child B&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/nav&gt;

&lt;router-outlet&gt;&lt;/router-outlet&gt;
</code></pre>
<p>子路由和其它路由一样，同时需要&nbsp;<code>path</code>&nbsp;和&nbsp;<code>component</code>。唯一的区别是你要把子路由放在父路由的&nbsp;<code>children</code>&nbsp;数组中。</p>
<pre><code class="language-typescript">const routes: Routes = [
{
    path: 'first-component',
    component: FirstComponent, // this is the component with the &lt;router-outlet&gt; in the template
    children: [
      {
      path: 'child-a', // child route path
      component: ChildAComponent, // child route component that the router renders
      },
      {
      path: 'child-b',
      component: ChildBComponent, // another child route component that the router renders
      },
    ],
},
];
</code></pre>
<h2 id="用命名出口outlet显示多重路由">用命名出口（outlet）显示多重路由</h2>
<p>Angular 允许一个路由组件包含多个 Outlet，从而可以在一个路由组件中同时显示多个组件。其中，主要 Outlet（Primary Outlet）有且仅有一个，附属 Outlet（Auxiliary Outlet）可以有任意多个，各个附属 Outlet 通过不同的命名加以区分。每一个 Outlet 均可以通过路由配置来指定其可以显示的组件，这使得 Angular 可以灵活地对各个组件进行组合，从而满足不同场景的需求。在通讯录例子中，假设想灵活地在 DetailComponent 组件中控制 AnnotationComponent 组件和相册 AlbumComponent 组件的显示，那么首先可以在 DetailComponent 组件的模板中添加一个名为 aux 的附属 Outlet。</p>
<pre><code class="language-html">&lt;!--detail.component.html --&gt;
&lt;div class="detail-contain"&gt;
&lt;!-- ... --&gt;
&lt;router-outlet&gt;&lt;/router-outlet&gt;
&lt;router-outlet name="aux"&gt;&lt;/router-outlet&gt;
&lt;/div&gt;
</code></pre>
<p>接下来在路由配置中定义在主要 Outlet 和附属 Outlet 上均可以显示 AnnotationComponent 组件和相册 AlbumComponent 组件。</p>
<pre><code class="language-typescript">export const rootRouterConfig: Routes = [
{
    path: 'detail/:id', component: DetailComponent,
    children: [
      // 主要 Outlet
      { path: '', component: AnnotationComponent },
      { path: 'album', component: AlbumComponent },
      // 附属 Outlet
      { path: 'annotation', component: AnnotationComponent, outlet: 'aux' },
      { path: 'album', component: AlbumComponent, outlet: 'aux' },
    ]
}
];
</code></pre>
<pre><code class="language-typescript">&lt;a ='[{ outlets: { popup: ['aux'] } }]'&gt;&lt;/a&gt;
</code></pre>
<p>以 id 为 1 的联系人为例，下表列出了各种可能的组合及其对应的 URL 和链接参数数组。在链接参数数组中，如果一个元素包含了 outlets 属性，则表示该元素将用于为各个 Outlet 进行配置项匹配</p>
<p><img src="https://img2023.cnblogs.com/blog/196558/202302/196558-20230213232100588-144707017.png" alt="" loading="lazy"></p>
<h1 id="惰性加载">惰性加载</h1>
<p>https://angular.cn/guide/lazy-loading-ngmodules</p>
<p>惰性加载可以减小初始包的尺寸，从而减少加载时间。</p>
<p>要惰性加载 Angular 模块，请在&nbsp;<code>AppRoutingModule</code>&nbsp;<code>routes</code>&nbsp;中使用&nbsp;<code>loadChildren</code>&nbsp;代替&nbsp;<code>component</code>&nbsp;进行配置，</p>
<pre><code class="language-typescript">const routes: Routes = [
{
    path: 'items',
    loadChildren: () =&gt; import('./items/items.module').then(m =&gt; m.ItemsModule)
}
];
</code></pre>
<p>创建一个带路由的特性模块</p>
<p>接下来，你将需要一个包含路由的目标组件的特性模块。要创建它，在命令行工具中输入如下命令，其中&nbsp;<code>children-module</code>&nbsp;是特性模块的名称。加载&nbsp;<code>children-module</code>&nbsp;特性模块的路径也是&nbsp;<code>children-module</code>，因为它是通过&nbsp;<code>--route</code>&nbsp;选项指定的：</p>
<pre><code class="language-typescript">ng generate module children-module --route children-module --module app.module
</code></pre>
<p>这将创建一个&nbsp;<code>children-module</code>&nbsp;目录，在其&nbsp;<code>children-module.module.ts</code>&nbsp;文件中定义了新的可惰性加载模块&nbsp;<code>ChildrenModuleModule</code>。该命令会自动在新特性模块中声明&nbsp;<code>ChildrenModuleModuleComponent</code>。</p>
<p><img src="https://img2023.cnblogs.com/blog/196558/202302/196558-20230214234010624-135873559.png" alt="" loading="lazy"></p>
<p>因为我们直接引用 <code>ListComponent</code>，删除掉相关的 <code>children-module.component</code></p>
<p><img src="https://img2023.cnblogs.com/blog/196558/202302/196558-20230214233534667-1262476469.png" alt="" loading="lazy"></p>
<p><img src="https://img2023.cnblogs.com/blog/196558/202302/196558-20230214235157607-1409636242.png" alt="" loading="lazy"></p>
<p>就OK了。</p>
<p><img src="https://img2023.cnblogs.com/blog/196558/202302/196558-20230214234616378-430047255.gif" alt="" loading="lazy"></p>
<h2 id="forroot与-forchild">forRoot()&nbsp;与 forChild()</h2>
<p>你可能已经注意到了，Angular CLI 会把&nbsp;<code>RouterModule.forRoot(routes)</code>&nbsp;添加到&nbsp;<code>AppRoutingModule</code>&nbsp;的&nbsp;<code>imports</code>&nbsp;数组中。这会让 Angular 知道&nbsp;<code>AppRoutingModule</code>&nbsp;是一个路由模块，而&nbsp;<code>forRoot()</code>&nbsp;表示这是一个根路由模块。它会配置你传入的所有路由、让你能访问路由器指令并注册&nbsp;Router。<code>forRoot()</code>](https://angular.cn/api/router/Router)%E3%80%82%60forRoot()%60)&nbsp;在应用中只应该使用一次，也就是这个&nbsp;<code>AppRoutingModule</code>&nbsp;中。</p>
<p>Angular CLI 还会把&nbsp;<code>RouterModule.forChild(routes)</code>&nbsp;添加到各个特性模块中。这种方式下 Angular 就会知道这个路由列表只负责提供额外的路由并且其设计意图是作为特性模块使用。你可以在多个模块中使用&nbsp;<code>forChild()</code>。</p>
<p><code>forRoot()</code>&nbsp;方法为路由器管理<em>全局性的</em>注入器配置。<code>forChild()</code>&nbsp;方法中没有注入器配置，只有像&nbsp;RouterOutlet&nbsp;和&nbsp;RouterLink&nbsp;这样的指令。欲知详情，参阅单例服务章的&nbsp;<code>forRoot()</code>&nbsp;模式小节。</p>
<h2 id="预加载">预加载</h2>
<p>https://angular.cn/guide/lazy-loading-ngmodules#preloading</p>
<h1 id="防止未经授权的访问">防止未经授权的访问</h1>
<p>使用路由守卫来防止用户未经授权就导航到应用的某些部分。Angular 中提供了以下路由守卫：</p>
<ul>
<li>
<p><code>canActivate</code> 激活拦截。（控制是否允许进入路由）</p>
</li>
<li>
<p><code>canActivateChild</code> 与 CanActivate 类似，用于控制是否允许激活子路由配置项。</p>
</li>
<li>
<p><code>canDeactivate</code> 反激活拦截。（控制是否允许离开路由）</p>
</li>
<li>
<p><code>canMatch</code> 在&nbsp;Route&nbsp;上用作&nbsp;CanMatch&nbsp;保护的函数的签名</p>
</li>
<li>
<p><code>resolve</code> 数据预加载拦截。</p>
</li>
<li>
<p><code>canLoad</code> 模块加载拦截（控制是否允许延迟加载整个模块）。</p>
</li>
</ul>
<p>要想使用路由守卫，可以考虑使用无组件路由，因为这对于保护子路由很方便。</p>
<p>为你的守卫创建一项服务：</p>
<p>请在守卫函数里实现你要用到的守卫。下面的例子使用&nbsp;<code>canActivate</code>&nbsp;来保护该路由。</p>
<pre><code class="language-typescript">export const yourGuard: CanActivateFn = (
    next: ActivatedRouteSnapshot,
    state: RouterStateSnapshot) =&gt; {
      // yourlogic goes here
}
</code></pre>
<p>在路由模块中，在&nbsp;<code>routes</code>&nbsp;配置中使用相应的属性。这里的&nbsp;<code>canActivate</code>&nbsp;会告诉路由器它要协调到这个特定路由的导航。</p>
<pre><code class="language-typescript">{
path: '/your-path',
component: YourComponent,
canActivate: ,
}
</code></pre>
<p>关于此可工作范例的更多信息，请参阅路由导航中关于路由守卫的部分。</p>
<h2 id="命令">命令</h2>
<pre><code class="language-typescript">&gt;ng g guard guards/authGuard   //命令

? Which type of guard would you like to create? CanActivate

CREATE src/app/guards/auth-guard.guard.ts (462 bytes)
</code></pre>
<h2 id="canactivate">canActivate</h2>
<p>类可以实现的接口，作为决定是否可以激活路由的守卫。如果返回&nbsp;<code>true</code>，则导航继续。如果返回&nbsp;<code>false</code>，则导航被取消。如果返回&nbsp;<code>UrlTree</code>，则当前导航被取消，并开始对返回的&nbsp;<code>UrlTree</code>&nbsp;进行新的导航。</p>
<pre><code class="language-typescript">import { Injectable, inject } from '@angular/core';
import { ActivatedRouteSnapshot, CanActivate, RouterStateSnapshot, UrlTree } from '@angular/router';
import { Observable } from 'rxjs';

@Injectable({
providedIn: 'root'
})


export class AuthGuardGuard implements CanActivate {
canActivate(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): Observable&lt;boolean | UrlTree&gt; | Promise&lt;boolean | UrlTree&gt; | boolean | UrlTree {
      console.log(route)
    return false;
}
}
</code></pre>
<p><img src="https://img2023.cnblogs.com/blog/196558/202309/196558-20230906000236564-821807086.png" alt="" loading="lazy"></p>
<h3 id="urltree-跳转">UrlTree 跳转</h3>
<p><img src="https://img2023.cnblogs.com/blog/196558/202309/196558-20230906000512366-1361492408.png" alt="" loading="lazy"></p>
<h3 id="canactivatefn">CanActivateFn</h3>
<p>CanActivate 被废弃了，基于类的“Route”保护已被弃用，取而代之的是功能性保护。一</p>
<p>*可注入类可以用作使用“inject”函数的功能保护：</p>
<pre><code class="language-typescript">import { Injectable, inject } from '@angular/core';
import { ActivatedRouteSnapshot, CanActivate, CanActivateFn, RouterStateSnapshot, UrlTree } from '@angular/router';
import { Observable } from 'rxjs';

@Injectable({
providedIn: 'root'
})

@Injectable()
export class AuthGuardGuard {
canActivate(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): Observable&lt;boolean | UrlTree&gt; | Promise&lt;boolean | UrlTree&gt; | boolean | UrlTree {
      console.log(route)
    return false;
}

}

export const authGuardGuard: CanActivateFn =
    (route: ActivatedRouteSnapshot, state: RouterStateSnapshot) =&gt; {
      return inject(AuthGuardGuard).canActivate(route, state);
    };

//https://angular.cn/api/router/CanActivateFn#description
</code></pre>
<h2 id="canactivatechild">CanActivateChild</h2>
<p><code>CanActivate</code>用来限制从特定路径的访问和所有的子路径和<code>CanActivateChild</code>被用来限制<code>CanActivate</code>路径内部访问一个特定的组。</p>
<p>例如，你可能有一个管理模块，所有路由都需要防止未经授权的进入加以防护：</p>
<pre><code class="language-typescript">{
    path: 'admin',
    component: AdminComponent,
    canActivate: [ AuthGuardService ],
    children : [
   {
   path: '', component: ...,
   },
   {
   path: 'manage-users', component: ...,
   },
   {
   path: 'manage-roles', component: ...,
   }
    ]
    }
</code></pre>
<p>这将需要保护的从上而下。没有未经授权的访问任何路线，包括根和儿童。在这种情况下，<code>canActivate</code>在根本上很好地保护了一切。</p>
<p>但你也可能有，你有一个功能模块，其中只有某些孩子需要加以防护时间：</p>
<pre><code class="language-typescript">{
    path: 'featureA',
    component: ...,
    canActivateChild: [ AuthGuardService ],
    children : [
   {
   path: 'manage-feature', component: ...,
   },
   {
   path: 'manage-members', component: ...,
   }
    ],
    {path: 'featureB', component: ...}
    }
</code></pre>
<p>在这种情况下，也许所有用户都需要正本清源组件的featureA“和'featureB'，但只有某些用户需要能够导航到'featureA'的子路由。在这种情况下，在根级别使用一名警卫人员更容易保护儿童，但不是根本身。另一种方法是在每条儿童路线上放置<code>canActivate</code>警卫，这可能会很乏味。</p>
<p>这一切都取决于您的要求，但它可以很好同时具有<code>canActivate</code>和<code>canActivateChild</code>的选项。</p>
<h3 id="resolve">Resolve</h3>
<p>数据预加载拦截</p>
<p>创建命令 <code>ng g resolver &lt;name&gt;</code></p>
<h2 id="参考angular路由路由守卫---starof">参考：Angular路由——路由守卫 - starof</h2><br><br>
来源：https://www.cnblogs.com/tangge/p/17121141.html

查看完整版本: angular - 路由