蓝妹 發表於 2019-7-23 10:40:00

angular 8 配置路由

<h3>一、生成路由文件</h3>
<p>&nbsp;按照惯例，有一个独立模块来配置相关路由，这个模块类的名字叫做AppRoutingModule,位于src/app下的app-routing.module.ts文件中。</p>
<p>使用CLI生成它。</p>
<div class="cnblogs_code">
<pre>ng generate module app-routing --flat --module=app</pre>
</div>
<p>然后查看src/app目录下是否生成成功。</p>
<p>接下来，我们查看生成的文件：</p>
<div class="cnblogs_code">
<div class="cnblogs_code_toolbar"><span class="cnblogs_code_copy"><img src="https://common.cnblogs.com/images/copycode.gif" alt="复制代码"></span></div>
<pre>import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

@NgModule({
imports: [
    CommonModule
],
declarations: []
})
export class AppRoutingModule { }</pre>
<div class="cnblogs_code_toolbar"><span class="cnblogs_code_copy"><img src="https://common.cnblogs.com/images/copycode.gif" alt="复制代码"></span></div>
</div>
<p>通常不会在路由模块中声明组件，所以可以删除<code>@NgModule.declarations</code>&nbsp;并删除对&nbsp;<code>CommonModule</code>&nbsp;的引用。</p>
<h3>二、导出 RouterModule</h3>
<p>此刻的AppRoutingModule是这样的：</p>
<div class="cnblogs_code">
<div class="cnblogs_code_toolbar"><span class="cnblogs_code_copy"><img src="https://common.cnblogs.com/images/copycode.gif" alt="复制代码"></span></div>
<pre>import { NgModule }             from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

@NgModule({
exports: [ RouterModule ]
})
export class AppRoutingModule {}</pre>
<div class="cnblogs_code_toolbar"><span class="cnblogs_code_copy"><img src="https://common.cnblogs.com/images/copycode.gif" alt="复制代码"></span></div>
</div>
<h3>三、添加路由定义</h3>
<p>典型的Angular路由（Route）有两个属性：</p>
<p>1、path：一个用于匹配浏览器地址栏中URL的字符串。</p>
<p>2、component：当导航到此路由时，路由应该创建哪个组件。</p>
<p>如果说你希望当URL为http://localhost:4200/homePage时，首先要导入HomePageComponent；以便在Route中引用它。</p>
<p>如下：</p>
<div class="cnblogs_code">
<div class="cnblogs_code_toolbar"><span class="cnblogs_code_copy"><img src="https://common.cnblogs.com/images/copycode.gif" alt="复制代码"></span></div>
<pre>import { NgModule } from '@angular/core';
import {RouterModule, Routes} from "@angular/router";
import {HomePageComponent} from "../home-page/home-page.component";

const routes: Routes = [
{ path: 'homePage', component: HomePageComponent }
];
@NgModule({
exports:
})
export class AppRoutingModule { }</pre>
<div class="cnblogs_code_toolbar"><span class="cnblogs_code_copy"><img src="https://common.cnblogs.com/images/copycode.gif" alt="复制代码"></span></div>
</div>
<h3>RouterModule.forRoot()</h3>
<p>&nbsp;初始化路由器，并让它开始监听浏览器的地址变化。（添加到&nbsp;<code>@NgModule.imports</code>&nbsp;数组中）</p>
<div class="cnblogs_code">
<pre>imports: [ RouterModule.forRoot(routes) ],</pre>
</div>
<p>注意：</p>
<p>查看app.module.ts文件中是否有引入AppRoutingModule。</p>
<div class="cnblogs_code">
<pre>import { AppRoutingModule } from './app-routing/app-routing.module';</pre>
</div>
<div class="cnblogs_code">
<pre>imports: [
    AppRoutingModule
],</pre>
</div>
<h3>四、添加路由出口</h3>
<p>&nbsp;打开AppComponent的模板，把&lt;router-outlet&gt;添加进去，&lt;router-outlet&gt;会告诉路由器要在哪里显示路由的试图。</p>
<div class="cnblogs_code">
<pre>&lt;router-outlet&gt;&lt;/router-outlet&gt;   // src/app/app.component.html</pre>
</div>
<h3>五、运行项目</h3>
<p>查看项目页面，注意你的CLI命令行是否仍在运行：</p>
<div class="cnblogs_code">
<pre>ng serve</pre>
</div>
<p>地址栏输入http://localhost:4200，这个时候你会看到地址栏显示着项目的标题，但是并没有显示HomePageComponent中的内容。</p>
<h3>六、添加默认路由</h3>
<p><strong>方法一：</strong>当启动项目时，浏览器的地址栏指向的是网站的根路径。它没有匹配到任何现存路由，因此路由器也不会导航到任何地方。</p>
<p>要让应用自动导航到这个仪表盘，请把下列路由添加到AppRoutingModule.routes数组中。</p>
<div class="cnblogs_code">
<pre>{ path: '', redirectTo: '/homePage', pathMatch: 'full' },</pre>
</div>
<p>现在再次访问项目，你会发现地址栏默认会把一个空路径重定向到'/homePage'的路由；并且首页也加载了HomePageComponent。</p>
<p><img src="https://img2018.cnblogs.com/blog/1158442/201904/1158442-20190401173639068-1171850420.png" alt=""></p>
<p><strong>方法二：</strong></p>
<div class="cnblogs_code">
<pre>{ path: '**', component:DashboardComponent}</pre>
</div>
<p>意思就是当路由URL等于’’时，会去加载DashboardComponent组件；所以你运行你的服务端口号：localhost:4200首先加载的就会是这个组件；</p>
<p><code>**</code>路径是一个<strong>通配符</strong>，表示除了以上几种path,任何的路径都会加载DashboardComponent组件，这个记得写在路由配置最后。</p>
<h3>七、添加路由链接(routerLink)</h3>
<p>不应该让用户只能把路由的 URL 粘贴到地址栏中。他们还应该能通过点击链接进行导航。</p>
<p>添加一个&nbsp;<code>&lt;nav&gt;</code>&nbsp;元素，并在其中放一个链接 &lt;a&gt;元素，当点击它时，就会触发一个到 DetailsComponent&nbsp;的导航。</p>
<div class="cnblogs_code">
<pre>&lt;div&gt;
home-page works!
&lt;nav&gt;
    &lt;a routerLink="/details"&gt;点击查看详情&lt;/a&gt;
&lt;/nav&gt;
&lt;/div&gt;</pre>
</div>
<p>同时需要把DetailsComponent引入到AppRoutingModule中。</p>
<p>点击查看详情这个链接。地址栏变成了/details，并且页面跳转到详情页。</p>
<h3>八、添加详情视图（HTML传参）</h3>
<p>现在假设我们首页展示的是一个文章列表，然后我们需要点击每一遍文章查看详情；如果说我们要导航到id为11的文章详情视图，类似于http://localhost:4200/heroes/11的URL。</p>
<p>首先打开AppRoutingModule并导入HeroesComponent。</p>
<div class="cnblogs_code">
<pre>import {HeroesComponent} from "./heroes/heroes.component";</pre>
</div>
<p>然后把一个参数化路由添加到&nbsp;<code>AppRoutingModule.routes</code>&nbsp;数组中，它要匹配指向文章详情视图的路径。</p>
<div class="cnblogs_code">
<pre>{ path: 'heroes/:id', component: HeroesComponent }</pre>
</div>
<p><code>path</code>&nbsp;中的冒号（<code>:</code>）表示&nbsp;<code>:id</code>&nbsp;是一个占位符，它表示某个特定英雄的&nbsp;<code>id</code>。</p>
<p>此刻，路由就准备就绪了。</p>
<p>然后，我们需要修改HTML页面中的文章列表跳转链接，让它们能够通过参数化的路由进行导航到文章详情页面。</p>
<div class="cnblogs_code">
<pre>&lt;nav&gt;
    &lt;a routerLink="/heroes/{{id}}"&gt;点击查看文章详情&lt;/a&gt;
    &lt;!--数组格式传参--&gt;
    &lt;a ="['/heroes', num]"&gt;点击查看文章详情&lt;/a&gt;
&lt;/nav&gt;</pre>
</div>
<p>现在我们刷新页面点击查看文章详情，你发现，地址栏已经更改为http://localhost:4200/heroes/11，页面展示也已经跳转到文章详情页面模块。</p>
<p><img src="https://img2018.cnblogs.com/blog/1158442/201904/1158442-20190402093339220-1144124496.png" alt=""></p>
<h3>九、js页面跳转（传参）</h3>
<p>当你在AppRoutingModule导入了HeroesComponent，并且把一个参数化路由添加到&nbsp;<code>AppRoutingModule.routes</code>&nbsp;数组中。</p>
<p>我们现在需要通过js传参跳转到HeroesComponent（几个常用的方法）：</p>
<p>&nbsp;1、先添加下列导入语句：</p>
<div class="cnblogs_code">
<pre>import { Router } from '@angular/router';//引入</pre>
</div>
<p>&nbsp;然后把&nbsp;<code>ActivatedRoute</code>注入到构造函数中，将它们的值保存到私有变量里：</p>
<div class="cnblogs_code">
<pre>constructor( private router: Router) { }//注入到构造函数</pre>
</div>
<p>&nbsp;2、传递路由参数</p>
<p>单参传递</p>
<p>navigate()该方法支持的参数类型和routerLink指令一样，所以它们的作用也是一样的：</p>
<div class="cnblogs_code">
<pre>this.router.navigate(['heroes', id]);</pre>
</div>
<p>或者：</p>
<div class="cnblogs_code">
<pre>this.router.navigate(['heroes']);</pre>
</div>
<p>多参传递</p>
<div class="cnblogs_code">
<pre>this.router.navigate(['heroDetail'], {queryParams: {productId: '1',title: 'moon'}</pre>
</div>
<p>3、我们注意到还有一个：navigateByUrl（），这个叫做绝对路由；</p>
<div class="cnblogs_code">
<pre>this.router.navigateByUrl('home');</pre>
</div>
<p>区别：navigateByUrl（）和navigate（）的区别点是：navigateByUrl不是根据参数来确定路由地址的。</p>
<h3>十、从路由参数中提取id</h3>
<p>&nbsp;1、先添加下列导入语句：</p>
<div class="cnblogs_code">
<pre>import { ActivatedRoute } from '@angular/router';</pre>
</div>
<p>&nbsp;然后把&nbsp;<code>ActivatedRoute</code>注入到构造函数中，将它们的值保存到私有变量里：</p>
<div class="cnblogs_code">
<pre>constructor(
private route: ActivatedRoute,
) {}</pre>
</div>
<p><code>ActivatedRoute</code>&nbsp;保存着到这个&nbsp;<code>HeroDetailComponent</code>&nbsp;实例的路由信息。 这个组件对从 URL 中提取的路由参数感兴趣。 其中的&nbsp;<code>id</code>&nbsp;参数就是要显示的英雄的&nbsp;<code>id</code>。</p>
<p>2、获取路由参数</p>
<p>方法一：</p>
<div class="cnblogs_code">
<pre> this.route.queryParams.subscribe(queryParams =&gt; {
      let productId = queryParams.productId;
      let title = queryParams.title;
    });</pre>
</div>
<p>方法二：</p>
<p>&nbsp;代码如下：</p>
<div class="cnblogs_code">
<div class="cnblogs_code_toolbar"><span class="cnblogs_code_copy"><img src="https://common.cnblogs.com/images/copycode.gif" alt="复制代码"></span></div>
<pre>public params;//公有变量
ngOnInit() {
    this.getData();
}
getData() {
   this.route.params.subscribe(
       params =&gt; {
          this.params = params;
          console.log(this.params);
       }
    );
}</pre>
<div class="cnblogs_code_toolbar"><span class="cnblogs_code_copy"><img src="https://common.cnblogs.com/images/copycode.gif" alt="复制代码"></span></div>
</div>
<p>这样获取的是一个对象，直接获取id就可以了。</p>
<p>方法三：</p>
<p>代码如下：</p>
<div class="cnblogs_code">
<div class="cnblogs_code_toolbar"><span class="cnblogs_code_copy"><img src="https://common.cnblogs.com/images/copycode.gif" alt="复制代码"></span></div>
<pre>ngOnInit(): void {
this.getData();
}

getData(): void {
const id = +this.route.snapshot.paramMap.get('id');
console.log(id);
}</pre>
<div class="cnblogs_code_toolbar"><span class="cnblogs_code_copy"><img src="https://common.cnblogs.com/images/copycode.gif" alt="复制代码"></span></div>
</div>
<h3>十一、回到原路</h3>
<p>&nbsp;1、先添加下列导入语句：</p>
<div class="cnblogs_code">
<pre>import { Location } from '@angular/common';</pre>
</div>
<p>然后把&nbsp;<code>Location</code>&nbsp;服务注入到构造函数中，将它们的值保存到私有变量里：</p>
<div class="cnblogs_code">
<pre>constructor(
private location: Location
) {}</pre>
</div>
<p><code>location</code>&nbsp;是一个 Angular 的服务，用来与浏览器打交道。&nbsp;稍后，你就会使用它来导航回上一个视图。</p>
<p>2、点击返回页面：</p>
<p>通过点击浏览器的后退按钮，可以回到上一个也买你进入的页面。</p>
<p>把一个后退按钮添加到组件模板的底部，并且把它绑定到组件的 goBack()&nbsp;方法。</p>
<div class="cnblogs_code">
<pre>&lt;button (click)="goBack()"&gt;go back&lt;/button&gt;</pre>
</div>
<p>在组件类中添加一个&nbsp;<code>goBack()</code>&nbsp;方法，利用注入的<code>Location</code>&nbsp;服务在浏览器的历史栈中后退一步。</p>
<div class="cnblogs_code">
<pre>goBack(): void {
this.location.back();
}</pre>
</div><br><br>
来源：https://www.cnblogs.com/reaf/p/11230312.html
頁: [1]
查看完整版本: angular 8 配置路由