angular6.x系列的学习笔记记录,仍在不断完善中,学习地址:

  • https://www.angular.cn/guide/template-syntax
  • http://www.ngfans.net/topic/12/post/2

系列目录

(1)组件详解之模板语法

(2)组件详解之组件通讯

(3)内容投影, ViewChild和ContentChild

(4)指令

(5)路由

路由存在的意义

一般而言,浏览器具有下列导航模式:

  • 在地址栏输入 URL,浏览器就会导航到相应的页面。

  • 在页面中点击链接,浏览器就会导航到一个新页面。

  • 点击浏览器的前进和后退按钮,浏览器就会在你的浏览历史中向前或向后导航。

那么,在angular中,是什么决定上述的行为呢?

对于一个新建的项目而言,只存在一个组件AppComponent,如果不增加其他的组件,意味着所有的行为就将在这一个组件里面完成,这种情况下,单一的组件将无法保存状态的变化,这显然满足不了上面的需求.所以,通常情况下,会如我在组件通讯中所写,组件之间呈如下的树形结构:

在这里插入图片描述

路由就是连接这些组件的筋络,它也是树形结构的.有了它,就可以在angular中实现上述的导航模式

可以把路由看成是一组规则,它决定了url的变化对应着哪一种状态,具体表现就是不同视图的切换

在angular中,路由是非常重要的组成部分, 组件的实例化与销毁,模块的加载,组件的某些生命周期钩子的发起,都是与它有关

路由定义

我们从新建一个项目来演示一下路由的基本定义,对新建项目加以丰富,增添娱乐,学习,工作三个组件,对应的文件结构如下:

文件结构

│  app.component.html
│  app.component.ts
│  app.module.ts
│  
└─routes├─happy│      happy.component.html│      happy.component.ts│      ├─study│      study.component.html│      study.component.ts│      └─workwork.component.htmlwork.component.ts

如何能够实现以下的效果呢?

当前Url对应组件内容
localhost:XXX/HappyComponent
localhost:XXX/workWorkComponent
localhost:XXX/happyHappyComponent
localhost:XXX/studyStudyComponent
localhost:XXX/nothingHappyComponent

在AppModule中增加如下的路由配置,即可满足上面的需求

  import { BrowserModule } from '@angular/platform-browser';import { NgModule } from '@angular/core';import { AppComponent } from './app.component';import { WorkComponent } from './routes/work/work.component';import { StudyComponent } from './routes/study/study.component';import { HappyComponent } from './routes/happy/happy.component';import { Routes, RouterModule } from '@angular/router';const appRoutes: Routes = [{ path: '', component: HappyComponent },{ path: 'work', component: WorkComponent },{ path: 'happy', component: HappyComponent },{ path: 'study', component: StudyComponent },{ path: '**', component: HappyComponent },]@NgModule({declarations: [AppComponent,WorkComponent,StudyComponent,HappyComponent],imports: [RouterModule.forRoot(appRoutes),BrowserModule,],providers: [],bootstrap: [AppComponent]})export class AppModule { }

也许上面有一些陌生的东西,但这并不重要,让我们在介绍路由模块之后一起来介绍

路由模块

在上述路由定义中,是把路由的配置放在模块AppModule中进行的,这样在简单的配置中,是可以接受的.

但是随着应用的成长,会用到更多路由器特性,比如:守卫,解析器和子路由等,这时候再在模块中进行配置,就会显得杂乱冗肿

官方建议重构路由,将路由信息移到一个单独的特殊用途模块之中,叫做路由模块。

路由模块并不是必须的,它只是优化设计的一种选择,它的价值在配置很复杂,并包含专门守卫和解析器服务时尤其明显。能够保持设计的一致性和代码的干净,便于开发者查找和扩展配置.当然,在配置很简单时,它可能看起来很多余。

路由模块有一系列特性:

  • 把路由这个关注点从其它应用类关注点中分离出去。
  • 测试特性模块时,可以替换或移除路由模块。
  • 为路由服务提供商(包括守卫和解析器等)提供一个共同的地方。
  • 不要声明组件。

将上面的模块中的路由定义转换成路由模块,文件结构变化如下:

文件结构

│  app-routing.module.ts
│  app.component.html
│  app.component.ts
│  app.module.ts
│  
└─routes│  ├─happy│      happy.component.html│      happy.component.ts│      ├─study│      study.component.html│      study.component.ts│      └─workwork.component.htmlwork.component.ts

具体代码:

app.module.ts

import { BrowserModule } from '@angular/platform-browser';import { NgModule } from '@angular/core';import { AppComponent } from './app.component';import { AppRoutingModule } from './app-routing.module';import { WorkComponent } from './routes/work/work.component';import { StudyComponent } from './routes/study/study.component';import { HappyComponent } from './routes/happy/happy.component';@NgModule({declarations: [AppComponent,WorkComponent,StudyComponent,HappyComponent],imports: [BrowserModule,AppRoutingModule],providers: [],bootstrap: [AppComponent]})export class AppModule { }

app-routing.module.ts

   import { NgModule } from '@angular/core';import { Routes, RouterModule } from '@angular/router';import { HappyComponent } from './routes/happy/happy.component';import { StudyComponent } from './routes/study/study.component';import { WorkComponent } from './routes/work/work.component';const routes: Routes = [{ path: '', component: HappyComponent },{ path: 'work', component: WorkComponent },{ path: 'happy', component: HappyComponent },{ path: 'study', component: StudyComponent },{ path: '**', component: HappyComponent },];@NgModule({imports: [RouterModule.forRoot(routes)],exports: [RouterModule]})export class AppRoutingModule { }

warnning

根据上面的内容,我们有两种配置路由的方法,即在路由模块或者在模块内部配置路由,但不要同时在两处都配置。

Router路由器与Route路由

路由器是一个调度中心,它是一套规则的列表,能够查询当前URL对应的规则,并呈现出相应的视图.

路由是列表里面的一个规则,即路由定义,它有很多功能字段,上述列子中:它有一个path字段,表示该路由中的URL路径部分和一个Component字段,表示与该路由相关联的组件

每个带路由的Angular应用都有一个路由器服务的单例对象,通过路由定义的列表进行配置后使用。

上述具体的工作流程,可以举例简单描述为:

  • 当浏览器地址栏的URL变化时,路径部分/study满足了列表中path为"study"的这个路由定义,激活对应StudyComponent的实例,显示它的视图
  • 当应用程序请求导航到路径/work时,符合了另外的规则,激活对应视图且展示内容,并将该路径更新到浏览器地址栏和历史

Warnning

RouterModule.forRoot方法是用于注册全应用级提供商的编码模式.把RouterModule.forRoot()注册到AppModule的imports中,能让该Router服务在应用的任何地方都能使用.只在根模块AppRoutingModule中调用RouterModule.forRoot(如果在AppModule中注册应用的顶级路由,那就在
AppModule中调用),在其它模块,你就必须调用RouterModule.forChild方法来注册附属路由.

默认路由与通配符路由

默认路由就是上述的空路由’’,表示应用的默认路径,当URL为空时就会访问那里,因此它通常会作为起点。

最后一个路由中的**路径是一个通配符,当所请求的URL不匹配前面定义的路由表中的任何路径时,路由器就会选择此路由.这个特性可用于显示“404 - Not Found”页,或自动重定向到其它路由.

顺序

路由器中的路由定义列表的顺序是非常重要的,它符合就近原则,当浏览器的URL变化时,Router会从上到下依次查找对应的Route,找到符合规则Route后,就决定显示那个组件,那么后面的路由就被"短路"了,例如,如果把通配符路由放在第一个,那么无论路由怎么变化,在他后面的路由都失去了意义,因为不论怎么变化,他都是第一个符合规则的,所以它通常要放在最后一个

路由出口

我们配置好的路由,是在哪里渲染内容呢?

下列是一个新建项目的app.component.html视图内容:

app.component.html

 <!--The content below is only a placeholder and can be replaced.--><div style="text-align:center"><h1>Welcome to {{ title }}!</h1><img width="300" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg=="></div><h2>Here are some links to help you start: </h2><ul><li><h2><a target="_blank" rel="noopener" href="https://angular.io/tutorial">Tour of Heroes</a></h2></li><li><h2><a target="_blank" rel="noopener" href="https://angular.io/cli">CLI Documentation</a></h2></li><li><h2><a target="_blank" rel="noopener" href="https://blog.angular.io/">Angular blog</a></h2></li></ul><router-outlet></router-outlet>

其中有这样一个标签<router-outlet></router-outlet>

RouterOutlet是一个来自路由模块中的指令,它的用法类似于组件.它扮演一个占位符的角色,用于在模板中标出一个位置,路由器将会把要显示在这个出口处的组件显示在这里,即在宿主视图中的RouterOutlet之后显示组件内容.

路由嵌套

路由和组件一样,都是树形结构的,可以层层嵌套,配置子路由

在如上内容的结构下,假设在happy组件中增加text,picture,video三个组件,文件结构如下:

文件结构

│  app-routing.module.ts
│  app.component.html
│  app.component.ts
│  app.module.ts
│  
└─routes│  ├─happy│  │  happy-routing.module.ts│  │  happy.component.html│  │  happy.component.ts│  │  happy.module.ts│  │  │  ├─picture│  │      picture.component.html│  │      picture.component.ts│  │      │  ├─text│  │      text.component.html│  │      text.component.ts│  │      │  └─video│          video.component.html│          video.component.ts│          ├─study│      study.component.html│      study.component.ts│      └─workwork.component.htmlwork.component.ts

注意一点我们需要在AppModule中引入HappyModule

具体代码:

app.module.ts

  import { BrowserModule } from '@angular/platform-browser';import { NgModule } from '@angular/core';import { AppComponent } from './app.component';import { AppRoutingModule } from './app-routing.module';import { WorkComponent } from './routes/work/work.component';import { StudyComponent } from './routes/study/study.component';import { HappyComponent } from './routes/happy/happy.component';import { HappyModule } from './routes/happy/happy.module';@NgModule({declarations: [AppComponent,WorkComponent,StudyComponent,HappyComponent],imports: [BrowserModule,HappyModule,AppRoutingModule],providers: [],bootstrap: [AppComponent]})export class AppModule { }

app-routing.module.ts

 import { NgModule } from '@angular/core';import { Routes, RouterModule } from '@angular/router';import { HappyComponent } from './routes/happy/happy.component';import { StudyComponent } from './routes/study/study.component';import { WorkComponent } from './routes/work/work.component';const routes: Routes = [{ path: '', component: HappyComponent },{ path: 'work', component: WorkComponent },{ path: 'happy', component: HappyComponent },{ path: 'study', component: StudyComponent },{ path: '**', component: HappyComponent },];@NgModule({imports: [RouterModule.forRoot(routes)],exports: [RouterModule]})export class AppRoutingModule { }

happy.module.ts

 import { NgModule } from '@angular/core';import { CommonModule } from '@angular/common';import { HappyRoutingModule } from './happy-routing.module';import { VideoComponent } from './video/video.component';import { PictureComponent } from './picture/picture.component';import { TextComponent } from './text/text.component';@NgModule({declarations: [VideoComponent,PictureComponent,TextComponent],imports: [CommonModule,HappyRoutingModule]})export class HappyModule { }

happy-routing.module.ts

import { NgModule } from '@angular/core';import { Routes, RouterModule } from '@angular/router';import { HappyComponent } from './happy.component';import { TextComponent } from './text/text.component';import { PictureComponent } from './picture/picture.component';import { VideoComponent } from './video/video.component';const routes: Routes = [{path: 'happy',component: HappyComponent,children: [{path: '',children: [{path: '',component: TextComponent},{path: 'text',component: TextComponent},{path: 'picture',component: PictureComponent},{path: 'video',component: VideoComponent},{path: '**',component: TextComponent}]}]}];@NgModule({imports: [RouterModule.forChild(routes)],exports: [RouterModule]})export class HappyRoutingModule { }

在子路由下面使用了一次空路由,Router支持空路径路由,可以使用它们来分组路由,而不用往 URL 中添加额外的路径片段

假设在路由守卫的时候,想对每一个子路由进行认证,这时候就不需要一一添加,加在这个空路由上即可

路由跳转

在具体的应用中,我们不可能让所有的路由触发都是靠路由地址的改变来实现,这是非常被动的

很多情况下,是我们通过事件,主动触发路由的变化,具体内容参见组件通讯,在路由跳转中我已经写明

路由守卫

目前,任何用户都能在任何时候导航到任何地方,对于大部分应用,这样是存在安全问题的,某些用户可能无权导航到目标组件,需要先登录(认证)

在显示目标组件前,可能需要先获取某些数据。

在离开组件前,可能要先保存修改.需要询问用户:是否要放弃本次更改,而不用保存它们?

对于上述这些场景问题,往往需要在路由配置中添加守卫,进行处理.

守卫通过返回一个值,以控制路由器的行为:

如果它返回 true,导航过程会继续

如果它返回 false,导航过程就会终止,且用户留在原地。

如果它返回 UrlTree,则取消当前的导航,并且开始导航到返回的这个 UrlTree.

warnning

守卫还可以告诉路由器导航到别处,这样也会取消当前的导航。要想在守卫中这么做,就要返回 false;

守卫可以用同步的方式返回一个布尔值,但在很多情况下,守卫无法用同步的方式给出答案.守卫可能会向用户问一个问题、把更改保存到服务器,或者获取新数据,而这些都是异步操作。因此,路由的守卫可以返回一个Observable Promise,并且路由器会等待这个可观察对象被解析为true或false。

warnning

提供给路由器的可观察对象还必须能结束,否则,导航就不会继续.

路由器可以支持多种守卫接口:

  • 用CanActivate来处理导航到某路由的情况。
  • 用CanActivateChild来处理导航到某子路由的情况。
  • 用CanDeactivate来处理从当前路由离开的情况.
  • 用Resolve在路由激活之前获取路由数据。
  • 用CanLoad来处理异步导航到某特性模块的情况。

在分层路由的每个级别上,你都可以设置多个守卫,上面提到过的空路由,在这里会可能发挥很好的作用

路由器会先按照从最深的子路由由下往上检查的顺序来检查CanDeactivate() 和CanActivateChild() 守卫.然后它会按照从上到下的顺序检查CanActivate()守卫. 如果特性模块是异步加载的,在加载它之前还会检查CanLoad()守卫. 如果任何一个守卫返回 false,其它尚未完成的守卫会被取消,这样整个导航就被取消.

下面以路由认证和处理未保存的更改来认识一下路由守卫

路由认证

增添一个登陆的功能,在访问/work的时候需要登陆才能访问,否则跳转到登陆页面

首先添加一个auth的服务,来保存登录状态和登陆与注销的功能

ng generate service auth/auth (简写ng g s auth/auth)

再添加一个auth守卫

ng generate guard auth/auth (简写ng g g auth/auth)

最后在对应路由中添加这个守卫

auth.guard.ts

import { Injectable } from '@angular/core';import { CanActivate, CanLoad, Route, UrlSegment, ActivatedRouteSnapshot, RouterStateSnapshot, UrlTree, Router } from '@angular/router';import { Observable } from 'rxjs';import { AuthService } from './auth.service';@Injectable({providedIn: 'root'})export class AuthGuard implements CanActivate {constructor(private authService: AuthService,private router: Router) { }canActivate(next: ActivatedRouteSnapshot,state: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {let url = state.urlreturn this.checkLogin(url);}checkLogin(url: string) {if (this.authService.isLoggedIn) return true;this.authService.redirectUrl = url;this.router.navigate(["login"]);return false;}}

auth.service.ts

 import { Injectable } from '@angular/core';import { Observable, of } from 'rxjs';import { tap, delay } from 'rxjs/operators';@Injectable({providedIn: 'root'})export class AuthService {//是否登陆的状态isLoggedIn: boolean = false;// 登录后重定向的地址redirectUrl: string = '';constructor() { }login(): Observable<boolean> {return of(true).pipe(delay(1000),tap(val => this.isLoggedIn = true));}logout(): void {this.isLoggedIn = false;}}

routes-routing.module.ts

  { path: 'work', canActivate: [AuthGuard], component: WorkComponent },

处理未保存的更改

在某些页面,我们可能会处理类似表单之类的提交数据的操作,有时候在没有完成数据提交之前,我们就有意或无意的离开了当前页面,比如:不小心触发了浏览器后退事件,或者主动的点击某个连接跳出当前页面,放弃此次操作.我们不能把每一次的路由变化都视为有意为之,如果真是不小心跳转的,那么可能填写的很多数据都付诸流水了

因此,当用户导航在页面之外时,应该弹出一个面板,询问是否离开当前页面, 如果用户选择了取消,就留在当前页面,并允许更多改动.如果用户选择了确认,那就放弃此次操作

首先,添加一个服务,用来弹出面板,确认用户的操作.

ng generate service dialog(ng g s dialog)

为DialogService 添加一个confirm()方法,以提醒用户确认.window.confirm是一个阻塞型操作,它会显示一个模态对话框,并等待用户的交互。

dialog.service.ts

 import { Injectable } from '@angular/core';import { of, Observable } from 'rxjs';@Injectable({providedIn: 'root'})export class DialogService {confirm(meesage: string): Observable<boolean> {const confirmation = window.confirm(meesage || '确认离开吗?')return of(confirmation);}}

然后,生成一个守卫guard,以检查组件(任意组件均可)中是否存在canDeactivate()方法。

ng generate guard can-deactivate(ng g g can-deactivate)

对于这个任意组件,守卫只需要检查它是否有一个canDeactivate()方法,并调用它,这就让该守卫可以复用.

假设用来保存上述StudyComponent组件里面的内容,那么需要修改成如下内容:

study.component.ts

  import { Component, OnInit } from '@angular/core';import { Observable } from 'rxjs';import { DialogService } from '../../dialog/dialog.service';import { CanComponentDeactivate } from '../../can-deactivate/can-deactivate.guard';@Component({selector: 'app-study',templateUrl: './study.component.html'})export class StudyComponent implements OnInit, CanComponentDeactivate {isChange: boolean = true;//提交数据是否发生变化constructor(public dialogService: DialogService) { }ngOnInit() { }canDeactivate(): Observable<boolean> | boolean {if (!this.isChange) return true; //未发生变化return this.dialogService.confirm('是否离开当前页面?');}}

这是通用的情况下,当然也可以为组件创建特定的CanDeactivate守卫,那就把守卫换成一下内容即可

can-deactivate.guard.ts

  import { Injectable } from '@angular/core';import { CanDeactivate } from '@angular/router';import { StudyComponent } from '../routes/study/study.component';@Injectable({providedIn: 'root',})export class CanDeactivateGuard implements CanDeactivate<StudyComponent> {canDeactivate(component: StudyComponent) {return component.canDeactivate ? component.canDeactivate() : true;}}

当然组件就不需要implements那个通用的接口CanComponentDeactivate了

最后把这个守卫放在对应的路由定义下就行了

异步路由

惰性加载

随着应用程序的不断壮大,程序的加载时间将会过长,这是我们不得不正视的一个严重问题.

如何才能解决这个问题呢?最好的办法就是引进异步路由:可以获得在请求时才惰性加载特性模块的能力. 惰性加载有多个优点:

  • 你可以只在用户请求时才加载某些特性区。
  • 对于那些只访问应用程序某些区域的用户,这样能加快加载速度。
  • 你可以持续扩充惰性加载特性区的功能,而不用增加初始加载的包体积。

惰性加载是加载的模块,所以需要对上述的结构改进一下:

文件结构

 │  app-routing.module.ts
│  app.component.html
│  app.component.ts
│  app.module.ts
│             
└─routes│  routes-routing.module.ts│  routes.module.ts│  ├─happy│  │  happy-routing.module.ts│  │  happy.component.html│  │  happy.component.ts│  │  happy.module.ts│  │  │  ├─picture│  │      picture.component.html│  │      picture.component.ts│  │      │  ├─text│  │      text.component.html│  │      text.component.ts│  │      │  └─video│          video.component.html│          video.component.ts│          ├─study│      study-routing.module.ts│      study.component.html│      study.component.ts│      study.module.ts│      └─workwork-routing.module.tswork.component.htmlwork.component.tswork.module.ts

具体代码:

app-routing.module.ts

  import { NgModule } from '@angular/core';import { Routes, RouterModule } from '@angular/router';const routes: Routes = [];@NgModule({imports: [RouterModule.forRoot(routes)],exports: [RouterModule]})export class AppRoutingModule { }

app.module.ts

  import { BrowserModule } from '@angular/platform-browser';import { NgModule } from '@angular/core';import { AppComponent } from './app.component';import { AppRoutingModule } from './app-routing.module';import { RoutesModule } from './routes/routes.module';@NgModule({declarations: [AppComponent],imports: [BrowserModule,RoutesModule,AppRoutingModule],providers: [],bootstrap: [AppComponent]})export class AppModule { }

routes-routing.module.ts

  import { NgModule } from '@angular/core';import { Routes, RouterModule } from '@angular/router';import { HappyComponent } from './happy/happy.component';const routes: Routes = [{ path: '', component: HappyComponent },{path: 'work',loadChildren: './work/work.module#WorkModule'},{path: 'study',loadChildren: './study/study.module#StudyModule'},{ path: '**', component: HappyComponent },]@NgModule({imports: [RouterModule.forRoot(routes)],exports: [RouterModule]})export class RoutesRoutingModule { }

routes.module.ts

  import { NgModule } from '@angular/core';import { CommonModule } from '@angular/common';import { RoutesRoutingModule } from './routes-routing.module';import { HappyModule } from './happy/happy.module';@NgModule({declarations: [],imports: [CommonModule,HappyModule,RoutesRoutingModule]})export class RoutesModule { }

work-routing.module.ts

  import { NgModule } from '@angular/core';import { Routes, RouterModule } from '@angular/router';import { WorkComponent } from './work.component';const routes: Routes = [{ path: '', redirectTo: 'work', pathMatch: 'full' },{ path: 'work', component: WorkComponent }];@NgModule({imports: [RouterModule.forChild(routes)],exports: [RouterModule]})export class WorkRoutingModule { }

work.module.ts

  import { NgModule } from '@angular/core';import { CommonModule } from '@angular/common';import { WorkRoutingModule } from './work-routing.module';import { WorkComponent } from './work.component';@NgModule({declarations: [WorkComponent],imports: [CommonModule,WorkRoutingModule]})export class WorkModule { }

happy-routing.module.ts

  import { NgModule } from '@angular/core';import { Routes, RouterModule } from '@angular/router';import { HappyComponent } from './happy.component';import { TextComponent } from './text/text.component';import { PictureComponent } from './picture/picture.component';import { VideoComponent } from './video/video.component';const routes: Routes = [{path: 'happy',component: HappyComponent,children: [{path: '',children: [{path: '',component: TextComponent},{path: 'text',component: TextComponent},{path: 'picture',component: PictureComponent},{path: 'video',component: VideoComponent},{path: '**',component: TextComponent}]}]}];@NgModule({imports: [RouterModule.forChild(routes)],exports: [RouterModule]})export class HappyRoutingModule { }

happy.module.ts

  import { NgModule } from '@angular/core';import { CommonModule } from '@angular/common';import { HappyRoutingModule } from './happy-routing.module';import { VideoComponent } from './video/video.component';import { PictureComponent } from './picture/picture.component';import { TextComponent } from './text/text.component';import { HappyComponent } from './happy.component';@NgModule({declarations: [HappyComponent,VideoComponent,PictureComponent,TextComponent],imports: [CommonModule,HappyRoutingModule]})export class HappyModule { }

HappyModule是启动后的默认路由模块,需要在启动时加载,所有没有惰性加载

对于WorkModule和StudyModule,只有在我们访问的时候,它们才会加载,这样就节约了启动时的加载时间

惰性加载和重新配置工作只会发生一次,也就是在该路由首次被请求时.在后续的请求中,该模块和路由都是立即可用的。

CanLoad守卫:保护对特性模块的未授权加载

在上面路由认证那节,我们对/work地址进行了认证,它会阻止未登陆用户访问/work,如果用户未登录,它就会跳转到登录页。

如果是以模块的形式 那么路由器仍然会加载WorkModule—— 即使用户无法访问它的任何一个组件.理想的方式是,只有在用户已登录的情况下才加载WorkModule。

使用CanLoad守卫,它只在用户已登录并且/work的时候,才加载 WorkModule一次。

现有的auth.guard.ts 的checkLogin()方法中已经有了支持CanLoad守卫的基础逻辑。

打开auth.guard.ts ,从@angular/router 中导入CanLoad接口,把它添加到AuthGuard类的implements列表中.然后实现canLoad,代码如下:

auth.guard.ts

  import { Injectable } from '@angular/core';import { CanActivate, CanLoad, Route, UrlSegment, ActivatedRouteSnapshot, RouterStateSnapshot, UrlTree, Router } from '@angular/router';import { Observable } from 'rxjs';import { AuthService } from './auth.service';@Injectable({providedIn: 'root'})export class AuthGuard implements CanActivate,CanLoad {constructor(private authService: AuthService,private router: Router) { }canActivate(next: ActivatedRouteSnapshot,state: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {let url = state.urlreturn this.checkLogin(url);}canLoad(route: Route): boolean {let url = `/${route.path}`;return this.checkLogin(url);}checkLogin(url: string) {if (this.authService.isLoggedIn) return true;this.authService.redirectUrl = url;this.router.navigate(["login"]);return false;}}

路由器会把canLoad()方法的route参数设置为准备访问的目标URL.如果用户已经登录了,checkLogin()方法就会重定向到那个 URL。

路由的内容是实在过于丰富,本文只能详尽部分内容,如想了解更多内容,请参见官方文档

(终)

查看全文
如若内容造成侵权/违法违规/事实不符,请联系编程学习网邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!

相关文章

  1. Angular 项目目录结构详解

    我们已经通过Angular CLI命令行工具创建出来一个全新的Angular项目&#xff0c;要想写项目&#xff0c;首先我们要先搞清楚项目的目录结构是怎样的&#xff0c;每个文件又有什么意义&#xff0c;文件中的代码又起到什么作用。 首先看一下整体的目录结构&#xff1a; 可以看到&a…...

    2024/3/17 18:57:48
  2. 长沙双眼皮 信美莱

    ...

    2024/3/17 18:54:50
  3. angular js中封装bootstrap-select实现单选、多选并且可模糊搜索

    一、用angular封装bootstrap directive 在使用隔离 scope 的时候&#xff0c;提供了三种方法同隔离之外的地方交互&#xff1a; 绑定一个局部 scope 属性到当前 dom 节点的属性值。结果总是一个字符串&#xff0c;因为 dom 属性是字符串。& 提供一种方式执行一个表达式在…...

    2024/3/17 16:33:03
  4. angular.js的ui-router总结

    ui-route先有个网址&#xff0c;再在这个网址下写路由子路由的搭建我们的布局/模板文件 index.html 我们通过建立一个主文件来引入我们所需要的所有资源以开始我们的项目 &#xff0c;这里我们使用 index.html 文件作为主文件 现在&#xff0c;我们加载我们所需的资源&#xff…...

    2024/3/25 4:08:39
  5. 拉双眼皮好么

    ...

    2024/3/24 2:23:17
  6. 专业双眼皮焊接仪?皱纹

    ...

    2024/3/17 14:50:42
  7. 赤峰双眼皮大姐怎么样

    ...

    2024/3/17 16:32:45
  8. 昨晚双眼皮如何更快祛肿

    ...

    2024/3/21 21:48:32
  9. Ionic!用Web技术开发移动应用!

    只需掌握Web技术就能开发移动应用是不是很爽&#xff1f;Ionic就可以做到&#xff01;Ionic是近几年很火的一项跨平台开发技术&#xff0c;有了它之后&#xff0c;用我们熟知的HTML、CSS和JavaScript技术就可以同时开发iOS和Android应用。让我们来初步了解下Ionic吧&#xff01…...

    2024/3/25 8:05:09
  10. 西安哪家割双眼皮好有效艺星

    ...

    2024/3/22 6:10:04
  11. 用Trigger.io改进移动Angular.js应用

    用Trigger.io改进移动Angular.js应用 作者&#xff1a;chszs&#xff0c;转载需注明。博客主页&#xff1a;http://blog.csdn.net/chszs Trigger.io Forge可以让我们使用最新、最好的Web技术来开发本地移动应用。本文展示了开发一个简单的Angular.js应用示例&#xff0c;并使用…...

    2024/3/22 0:00:19
  12. Hybird App混合移动应用开发技术整体解决方案,速来围观!

    摘要 由于H5的逐步普及&#xff0c;混合移动应用开发变的炙手可热&#xff0c;其主要的开发语言就是JavaScript&#xff0c;这在很多人看来无论是在性能和安全上来讲&#xff0c;并不被大家所看好&#xff0c;所今天就来谈一下如何对混合应用做优化以及加密&#xff0c;希望对…...

    2024/3/21 22:49:31
  13. angular2创建应用_帮助您了解和创建Angular 6应用程序的快速指南

    angular2创建应用This post is divided into two parts:这篇文章分为两个部分&#xff1a; The first part demonstrates how to create a simple Angular 6 App using Angular CLI and explains the project structure.第一部分演示了如何使用Angular CLI创建简单的Angular 6…...

    2024/3/22 0:38:50
  14. 韩国式双眼皮好么

    ...

    2024/3/22 0:53:37
  15. [移动应用]跨平台开发框架

    看了Flutter,NativeScript,React Native跨平台框架。 使用 其中React Native使用过,写过一些demo,在iOS和安卓上UI体验感还可以,而NativeScript体验过,感觉也非常不错,与React Native比较像。Flutter没有用过,据说也可以,性能要优于NativeScript,React Native。但是Fl…...

    2024/3/25 23:28:58
  16. 惊天霹雳雷!网页游戏世界模仿秀TOP10评比

    网页游戏在游戏界一直蒙着一层小弟的影子,因为其游戏的取材创意等等各方面,几乎都是从其他游戏中借鉴而来,其模仿力十足,所以在网页游戏中,山寨游戏比比皆是,好的游戏我们可以看为是网页版XX,不过目前,网页游戏之间的模仿也越来越严重了,不过小编今天为大家列出的,则…...

    2024/3/22 0:11:03
  17. 徐州开扇形双眼皮类型

    ...

    2024/3/24 11:43:42
  18. 椒江博雅美惠双眼皮一般多宽度

    ...

    2024/3/23 11:33:33
  19. 双眼皮那家医院做得好啊

    ...

    2024/3/21 23:16:23
  20. angular JS简单实现购物车功能

    angular JS简单实现购物车功能 angular 代码 <!DOCTYPE html> <html><head><meta charset"utf-8" /><title></title><style>table{margin-top: 50px;width: 500px;height: 300px;border: 1px solid;}tr,td{border: 1px s…...

    2024/3/22 4:20:53

最新文章

  1. Linux系统中的软件管理

    如何让虚拟机上网 # 1.Linux中软件包的类型 # &#xff08;1&#xff09;DEB #UBlinux DEBlinux &#xff08;2&#xff09;RPM #redhat centOS fadora &#xff08;3&#xff09;bz2|gz|xz #1.需要源码安装需要编译 #2.绿色软件&…...

    2024/3/29 3:25:42
  2. 梯度消失和梯度爆炸的一些处理方法

    在这里是记录一下梯度消失或梯度爆炸的一些处理技巧。全当学习总结了如有错误还请留言&#xff0c;在此感激不尽。 权重和梯度的更新公式如下&#xff1a; w w − η ⋅ ∇ w w w - \eta \cdot \nabla w ww−η⋅∇w 个人通俗的理解梯度消失就是网络模型在反向求导的时候出…...

    2024/3/20 10:50:27
  3. M芯片Mac构建支持arm64的java8基础镜像

    拉取指定平台的镜像 docker pull --platformarm64 openjdk:8-jdk-alpineopenjdk:8-jdk-alpine 没有安装bash&#xff0c;只安装sh&#xff0c;所以进入容器命令 docker exec -it 容器 /bin/sh以openjdk:8-jdk-alpine为基础镜像&#xff0c;添加bash Dockerfile FROM openj…...

    2024/3/28 20:26:43
  4. <深度学习初识>——《深度学习笔记》

    深度学习笔记 一、人工智能简介 1.人工智能发展的重要时间节点 1.1人工智能孕育期 1.2人工智能诞生期 1.3人工智能第一次浪潮的发展 1.4人工智能的第一次寒冬 第一次寒冬主要面临的几个问题&#xff1a; 1.5人工智能第二次浪潮的发展 1.6人工智能的第二次寒冬 1.7人工智能第…...

    2024/3/28 16:56:12
  5. 【外汇早评】美通胀数据走低,美元调整

    原标题:【外汇早评】美通胀数据走低,美元调整昨日美国方面公布了新一期的核心PCE物价指数数据,同比增长1.6%,低于前值和预期值的1.7%,距离美联储的通胀目标2%继续走低,通胀压力较低,且此前美国一季度GDP初值中的消费部分下滑明显,因此市场对美联储后续更可能降息的政策…...

    2024/3/27 10:21:24
  6. 【原油贵金属周评】原油多头拥挤,价格调整

    原标题:【原油贵金属周评】原油多头拥挤,价格调整本周国际劳动节,我们喜迎四天假期,但是整个金融市场确实流动性充沛,大事频发,各个商品波动剧烈。美国方面,在本周四凌晨公布5月份的利率决议和新闻发布会,维持联邦基金利率在2.25%-2.50%不变,符合市场预期。同时美联储…...

    2024/3/24 20:11:25
  7. 【外汇周评】靓丽非农不及疲软通胀影响

    原标题:【外汇周评】靓丽非农不及疲软通胀影响在刚结束的周五,美国方面公布了新一期的非农就业数据,大幅好于前值和预期,新增就业重新回到20万以上。具体数据: 美国4月非农就业人口变动 26.3万人,预期 19万人,前值 19.6万人。 美国4月失业率 3.6%,预期 3.8%,前值 3…...

    2024/3/29 2:45:46
  8. 【原油贵金属早评】库存继续增加,油价收跌

    原标题:【原油贵金属早评】库存继续增加,油价收跌周三清晨公布美国当周API原油库存数据,上周原油库存增加281万桶至4.692亿桶,增幅超过预期的74.4万桶。且有消息人士称,沙特阿美据悉将于6月向亚洲炼油厂额外出售更多原油,印度炼油商预计将每日获得至多20万桶的额外原油供…...

    2024/3/24 20:11:23
  9. 【外汇早评】日本央行会议纪要不改日元强势

    原标题:【外汇早评】日本央行会议纪要不改日元强势近两日日元大幅走强与近期市场风险情绪上升,避险资金回流日元有关,也与前一段时间的美日贸易谈判给日本缓冲期,日本方面对汇率问题也避免继续贬值有关。虽然今日早间日本央行公布的利率会议纪要仍然是支持宽松政策,但这符…...

    2024/3/26 20:58:42
  10. 【原油贵金属早评】欧佩克稳定市场,填补伊朗问题的影响

    原标题:【原油贵金属早评】欧佩克稳定市场,填补伊朗问题的影响近日伊朗局势升温,导致市场担忧影响原油供给,油价试图反弹。此时OPEC表态稳定市场。据消息人士透露,沙特6月石油出口料将低于700万桶/日,沙特已经收到石油消费国提出的6月份扩大出口的“适度要求”,沙特将满…...

    2024/3/28 17:01:12
  11. 【外汇早评】美欲与伊朗重谈协议

    原标题:【外汇早评】美欲与伊朗重谈协议美国对伊朗的制裁遭到伊朗的抗议,昨日伊朗方面提出将部分退出伊核协议。而此行为又遭到欧洲方面对伊朗的谴责和警告,伊朗外长昨日回应称,欧洲国家履行它们的义务,伊核协议就能保证存续。据传闻伊朗的导弹已经对准了以色列和美国的航…...

    2024/3/24 5:55:47
  12. 【原油贵金属早评】波动率飙升,市场情绪动荡

    原标题:【原油贵金属早评】波动率飙升,市场情绪动荡因中美贸易谈判不安情绪影响,金融市场各资产品种出现明显的波动。随着美国与中方开启第十一轮谈判之际,美国按照既定计划向中国2000亿商品征收25%的关税,市场情绪有所平复,已经开始接受这一事实。虽然波动率-恐慌指数VI…...

    2024/3/29 1:13:26
  13. 【原油贵金属周评】伊朗局势升温,黄金多头跃跃欲试

    原标题:【原油贵金属周评】伊朗局势升温,黄金多头跃跃欲试美国和伊朗的局势继续升温,市场风险情绪上升,避险黄金有向上突破阻力的迹象。原油方面稍显平稳,近期美国和OPEC加大供给及市场需求回落的影响,伊朗局势并未推升油价走强。近期中美贸易谈判摩擦再度升级,美国对中…...

    2024/3/26 23:04:51
  14. 【原油贵金属早评】市场情绪继续恶化,黄金上破

    原标题:【原油贵金属早评】市场情绪继续恶化,黄金上破周初中国针对于美国加征关税的进行的反制措施引发市场情绪的大幅波动,人民币汇率出现大幅的贬值动能,金融市场受到非常明显的冲击。尤其是波动率起来之后,对于股市的表现尤其不安。隔夜美国股市出现明显的下行走势,这…...

    2024/3/26 11:20:25
  15. 【外汇早评】美伊僵持,风险情绪继续升温

    原标题:【外汇早评】美伊僵持,风险情绪继续升温昨日沙特两艘油轮再次发生爆炸事件,导致波斯湾局势进一步恶化,市场担忧美伊可能会出现摩擦生火,避险品种获得支撑,黄金和日元大幅走强。美指受中美贸易问题影响而在低位震荡。继5月12日,四艘商船在阿联酋领海附近的阿曼湾、…...

    2024/3/24 20:11:18
  16. 【原油贵金属早评】贸易冲突导致需求低迷,油价弱势

    原标题:【原油贵金属早评】贸易冲突导致需求低迷,油价弱势近日虽然伊朗局势升温,中东地区几起油船被袭击事件影响,但油价并未走高,而是出于调整结构中。由于市场预期局势失控的可能性较低,而中美贸易问题导致的全球经济衰退风险更大,需求会持续低迷,因此油价调整压力较…...

    2024/3/28 9:10:53
  17. 氧生福地 玩美北湖(上)——为时光守候两千年

    原标题:氧生福地 玩美北湖(上)——为时光守候两千年一次说走就走的旅行,只有一张高铁票的距离~ 所以,湖南郴州,我来了~ 从广州南站出发,一个半小时就到达郴州西站了。在动车上,同时改票的南风兄和我居然被分到了一个车厢,所以一路非常愉快地聊了过来。 挺好,最起…...

    2024/3/29 0:49:46
  18. 氧生福地 玩美北湖(中)——永春梯田里的美与鲜

    原标题:氧生福地 玩美北湖(中)——永春梯田里的美与鲜一觉醒来,因为大家太爱“美”照,在柳毅山庄去寻找龙女而错过了早餐时间。近十点,向导坏坏还是带着饥肠辘辘的我们去吃郴州最富有盛名的“鱼头粉”。说这是“十二分推荐”,到郴州必吃的美食之一。 哇塞!那个味美香甜…...

    2024/3/24 20:11:15
  19. 氧生福地 玩美北湖(下)——奔跑吧骚年!

    原标题:氧生福地 玩美北湖(下)——奔跑吧骚年!让我们红尘做伴 活得潇潇洒洒 策马奔腾共享人世繁华 对酒当歌唱出心中喜悦 轰轰烈烈把握青春年华 让我们红尘做伴 活得潇潇洒洒 策马奔腾共享人世繁华 对酒当歌唱出心中喜悦 轰轰烈烈把握青春年华 啊……啊……啊 两…...

    2024/3/27 7:12:50
  20. 扒开伪装医用面膜,翻六倍价格宰客,小姐姐注意了!

    原标题:扒开伪装医用面膜,翻六倍价格宰客,小姐姐注意了!扒开伪装医用面膜,翻六倍价格宰客!当行业里的某一品项火爆了,就会有很多商家蹭热度,装逼忽悠,最近火爆朋友圈的医用面膜,被沾上了污点,到底怎么回事呢? “比普通面膜安全、效果好!痘痘、痘印、敏感肌都能用…...

    2024/3/24 20:11:13
  21. 「发现」铁皮石斛仙草之神奇功效用于医用面膜

    原标题:「发现」铁皮石斛仙草之神奇功效用于医用面膜丽彦妆铁皮石斛医用面膜|石斛多糖无菌修护补水贴19大优势: 1、铁皮石斛:自唐宋以来,一直被列为皇室贡品,铁皮石斛生于海拔1600米的悬崖峭壁之上,繁殖力差,产量极低,所以古代仅供皇室、贵族享用 2、铁皮石斛自古民间…...

    2024/3/26 11:21:23
  22. 丽彦妆\医用面膜\冷敷贴轻奢医学护肤引导者

    原标题:丽彦妆\医用面膜\冷敷贴轻奢医学护肤引导者【公司简介】 广州华彬企业隶属香港华彬集团有限公司,专注美业21年,其旗下品牌: 「圣茵美」私密荷尔蒙抗衰,产后修复 「圣仪轩」私密荷尔蒙抗衰,产后修复 「花茵莳」私密荷尔蒙抗衰,产后修复 「丽彦妆」专注医学护…...

    2024/3/28 18:26:34
  23. 广州械字号面膜生产厂家OEM/ODM4项须知!

    原标题:广州械字号面膜生产厂家OEM/ODM4项须知!广州械字号面膜生产厂家OEM/ODM流程及注意事项解读: 械字号医用面膜,其实在我国并没有严格的定义,通常我们说的医美面膜指的应该是一种「医用敷料」,也就是说,医用面膜其实算作「医疗器械」的一种,又称「医用冷敷贴」。 …...

    2024/3/28 12:42:28
  24. 械字号医用眼膜缓解用眼过度到底有无作用?

    原标题:械字号医用眼膜缓解用眼过度到底有无作用?医用眼膜/械字号眼膜/医用冷敷眼贴 凝胶层为亲水高分子材料,含70%以上的水分。体表皮肤温度传导到本产品的凝胶层,热量被凝胶内水分子吸收,通过水分的蒸发带走大量的热量,可迅速地降低体表皮肤局部温度,减轻局部皮肤的灼…...

    2024/3/28 20:09:10
  25. 配置失败还原请勿关闭计算机,电脑开机屏幕上面显示,配置失败还原更改 请勿关闭计算机 开不了机 这个问题怎么办...

    解析如下&#xff1a;1、长按电脑电源键直至关机&#xff0c;然后再按一次电源健重启电脑&#xff0c;按F8健进入安全模式2、安全模式下进入Windows系统桌面后&#xff0c;按住“winR”打开运行窗口&#xff0c;输入“services.msc”打开服务设置3、在服务界面&#xff0c;选中…...

    2022/11/19 21:17:18
  26. 错误使用 reshape要执行 RESHAPE,请勿更改元素数目。

    %读入6幅图像&#xff08;每一幅图像的大小是564*564&#xff09; f1 imread(WashingtonDC_Band1_564.tif); subplot(3,2,1),imshow(f1); f2 imread(WashingtonDC_Band2_564.tif); subplot(3,2,2),imshow(f2); f3 imread(WashingtonDC_Band3_564.tif); subplot(3,2,3),imsho…...

    2022/11/19 21:17:16
  27. 配置 已完成 请勿关闭计算机,win7系统关机提示“配置Windows Update已完成30%请勿关闭计算机...

    win7系统关机提示“配置Windows Update已完成30%请勿关闭计算机”问题的解决方法在win7系统关机时如果有升级系统的或者其他需要会直接进入一个 等待界面&#xff0c;在等待界面中我们需要等待操作结束才能关机&#xff0c;虽然这比较麻烦&#xff0c;但是对系统进行配置和升级…...

    2022/11/19 21:17:15
  28. 台式电脑显示配置100%请勿关闭计算机,“准备配置windows 请勿关闭计算机”的解决方法...

    有不少用户在重装Win7系统或更新系统后会遇到“准备配置windows&#xff0c;请勿关闭计算机”的提示&#xff0c;要过很久才能进入系统&#xff0c;有的用户甚至几个小时也无法进入&#xff0c;下面就教大家这个问题的解决方法。第一种方法&#xff1a;我们首先在左下角的“开始…...

    2022/11/19 21:17:14
  29. win7 正在配置 请勿关闭计算机,怎么办Win7开机显示正在配置Windows Update请勿关机...

    置信有很多用户都跟小编一样遇到过这样的问题&#xff0c;电脑时发现开机屏幕显现“正在配置Windows Update&#xff0c;请勿关机”(如下图所示)&#xff0c;而且还需求等大约5分钟才干进入系统。这是怎样回事呢&#xff1f;一切都是正常操作的&#xff0c;为什么开时机呈现“正…...

    2022/11/19 21:17:13
  30. 准备配置windows 请勿关闭计算机 蓝屏,Win7开机总是出现提示“配置Windows请勿关机”...

    Win7系统开机启动时总是出现“配置Windows请勿关机”的提示&#xff0c;没过几秒后电脑自动重启&#xff0c;每次开机都这样无法进入系统&#xff0c;此时碰到这种现象的用户就可以使用以下5种方法解决问题。方法一&#xff1a;开机按下F8&#xff0c;在出现的Windows高级启动选…...

    2022/11/19 21:17:12
  31. 准备windows请勿关闭计算机要多久,windows10系统提示正在准备windows请勿关闭计算机怎么办...

    有不少windows10系统用户反映说碰到这样一个情况&#xff0c;就是电脑提示正在准备windows请勿关闭计算机&#xff0c;碰到这样的问题该怎么解决呢&#xff0c;现在小编就给大家分享一下windows10系统提示正在准备windows请勿关闭计算机的具体第一种方法&#xff1a;1、2、依次…...

    2022/11/19 21:17:11
  32. 配置 已完成 请勿关闭计算机,win7系统关机提示“配置Windows Update已完成30%请勿关闭计算机”的解决方法...

    今天和大家分享一下win7系统重装了Win7旗舰版系统后&#xff0c;每次关机的时候桌面上都会显示一个“配置Windows Update的界面&#xff0c;提示请勿关闭计算机”&#xff0c;每次停留好几分钟才能正常关机&#xff0c;导致什么情况引起的呢&#xff1f;出现配置Windows Update…...

    2022/11/19 21:17:10
  33. 电脑桌面一直是清理请关闭计算机,windows7一直卡在清理 请勿关闭计算机-win7清理请勿关机,win7配置更新35%不动...

    只能是等着&#xff0c;别无他法。说是卡着如果你看硬盘灯应该在读写。如果从 Win 10 无法正常回滚&#xff0c;只能是考虑备份数据后重装系统了。解决来方案一&#xff1a;管理员运行cmd&#xff1a;net stop WuAuServcd %windir%ren SoftwareDistribution SDoldnet start WuA…...

    2022/11/19 21:17:09
  34. 计算机配置更新不起,电脑提示“配置Windows Update请勿关闭计算机”怎么办?

    原标题&#xff1a;电脑提示“配置Windows Update请勿关闭计算机”怎么办&#xff1f;win7系统中在开机与关闭的时候总是显示“配置windows update请勿关闭计算机”相信有不少朋友都曾遇到过一次两次还能忍但经常遇到就叫人感到心烦了遇到这种问题怎么办呢&#xff1f;一般的方…...

    2022/11/19 21:17:08
  35. 计算机正在配置无法关机,关机提示 windows7 正在配置windows 请勿关闭计算机 ,然后等了一晚上也没有关掉。现在电脑无法正常关机...

    关机提示 windows7 正在配置windows 请勿关闭计算机 &#xff0c;然后等了一晚上也没有关掉。现在电脑无法正常关机以下文字资料是由(历史新知网www.lishixinzhi.com)小编为大家搜集整理后发布的内容&#xff0c;让我们赶快一起来看一下吧&#xff01;关机提示 windows7 正在配…...

    2022/11/19 21:17:05
  36. 钉钉提示请勿通过开发者调试模式_钉钉请勿通过开发者调试模式是真的吗好不好用...

    钉钉请勿通过开发者调试模式是真的吗好不好用 更新时间:2020-04-20 22:24:19 浏览次数:729次 区域: 南阳 > 卧龙 列举网提醒您:为保障您的权益,请不要提前支付任何费用! 虚拟位置外设器!!轨迹模拟&虚拟位置外设神器 专业用于:钉钉,外勤365,红圈通,企业微信和…...

    2022/11/19 21:17:05
  37. 配置失败还原请勿关闭计算机怎么办,win7系统出现“配置windows update失败 还原更改 请勿关闭计算机”,长时间没反应,无法进入系统的解决方案...

    前几天班里有位学生电脑(windows 7系统)出问题了&#xff0c;具体表现是开机时一直停留在“配置windows update失败 还原更改 请勿关闭计算机”这个界面&#xff0c;长时间没反应&#xff0c;无法进入系统。这个问题原来帮其他同学也解决过&#xff0c;网上搜了不少资料&#x…...

    2022/11/19 21:17:04
  38. 一个电脑无法关闭计算机你应该怎么办,电脑显示“清理请勿关闭计算机”怎么办?...

    本文为你提供了3个有效解决电脑显示“清理请勿关闭计算机”问题的方法&#xff0c;并在最后教给你1种保护系统安全的好方法&#xff0c;一起来看看&#xff01;电脑出现“清理请勿关闭计算机”在Windows 7(SP1)和Windows Server 2008 R2 SP1中&#xff0c;添加了1个新功能在“磁…...

    2022/11/19 21:17:03
  39. 请勿关闭计算机还原更改要多久,电脑显示:配置windows更新失败,正在还原更改,请勿关闭计算机怎么办...

    许多用户在长期不使用电脑的时候&#xff0c;开启电脑发现电脑显示&#xff1a;配置windows更新失败&#xff0c;正在还原更改&#xff0c;请勿关闭计算机。。.这要怎么办呢&#xff1f;下面小编就带着大家一起看看吧&#xff01;如果能够正常进入系统&#xff0c;建议您暂时移…...

    2022/11/19 21:17:02
  40. 还原更改请勿关闭计算机 要多久,配置windows update失败 还原更改 请勿关闭计算机,电脑开机后一直显示以...

    配置windows update失败 还原更改 请勿关闭计算机&#xff0c;电脑开机后一直显示以以下文字资料是由(历史新知网www.lishixinzhi.com)小编为大家搜集整理后发布的内容&#xff0c;让我们赶快一起来看一下吧&#xff01;配置windows update失败 还原更改 请勿关闭计算机&#x…...

    2022/11/19 21:17:01
  41. 电脑配置中请勿关闭计算机怎么办,准备配置windows请勿关闭计算机一直显示怎么办【图解】...

    不知道大家有没有遇到过这样的一个问题&#xff0c;就是我们的win7系统在关机的时候&#xff0c;总是喜欢显示“准备配置windows&#xff0c;请勿关机”这样的一个页面&#xff0c;没有什么大碍&#xff0c;但是如果一直等着的话就要两个小时甚至更久都关不了机&#xff0c;非常…...

    2022/11/19 21:17:00
  42. 正在准备配置请勿关闭计算机,正在准备配置windows请勿关闭计算机时间长了解决教程...

    当电脑出现正在准备配置windows请勿关闭计算机时&#xff0c;一般是您正对windows进行升级&#xff0c;但是这个要是长时间没有反应&#xff0c;我们不能再傻等下去了。可能是电脑出了别的问题了&#xff0c;来看看教程的说法。正在准备配置windows请勿关闭计算机时间长了方法一…...

    2022/11/19 21:16:59
  43. 配置失败还原请勿关闭计算机,配置Windows Update失败,还原更改请勿关闭计算机...

    我们使用电脑的过程中有时会遇到这种情况&#xff0c;当我们打开电脑之后&#xff0c;发现一直停留在一个界面&#xff1a;“配置Windows Update失败&#xff0c;还原更改请勿关闭计算机”&#xff0c;等了许久还是无法进入系统。如果我们遇到此类问题应该如何解决呢&#xff0…...

    2022/11/19 21:16:58
  44. 如何在iPhone上关闭“请勿打扰”

    Apple’s “Do Not Disturb While Driving” is a potentially lifesaving iPhone feature, but it doesn’t always turn on automatically at the appropriate time. For example, you might be a passenger in a moving car, but your iPhone may think you’re the one dri…...

    2022/11/19 21:16:57