《Angular4从入门到实战》学习笔记(图文)
《Angular4从入门到实战》学习笔记
腾讯课堂:米斯特吴 视频讲座
二〇一九年二月十三日星期三14时14分
What Is Angular?(简介)
前端最流行的主流JavaScript框架;
由谷歌倾情打造并维护;
致力于构建单页面应用(SPA);
是主流MEAN综合框架中的一部分;
打破HTML静态,创建动态的WEB应用。
不是一个服务端的框架或技术;不是JS的一个库,例如jQuery,React等;不是用于设计;不是一个平台或一门语言;不是一个插件。(非常好)
Why Use Angular?(优点)
可以快速开发及代码迭代;(相对于瀑布模型,就是开发过程用户可见,先开发一个雏形,再迭代开发)
所有代码都通过组件实现(模块化)
动态获取数据内容;
跨平台
ECMAScript 6(以下简称ES6)是JavaScript语言的下一代标准,已经在2015年6月正式发布了。
TypeScript:
是JavaScript的超集;微软创建及维护;拥有具体的类型;面向对象;与JavaC#相似
Components(组件):
在Angular4中都是以组件式开发;在组件中包含选择器,模板等;当前的类用户处理逻辑。
安装:AngularCLI(脚手架)或从github中拉取并使用
依赖的环境:NPM&NODE:也就是安装node
从官网安装并测试安装成功否:node -v
由于Angular CLI的一些资源被墙掉了,所以,要使用淘宝镜像下载安装,否则,慢且会主线问题。淘宝镜像:https://npm.taobao.org/。
命令行输入:npm install -g cnpm
再输入:npm install -g cnpm --registry=https://registry.npm.taobao.org
安装Angular Cli,命令行输入:cnpm install -g @angular/cli@latest
检验是否安装成功:ng help
Angular CLI的命令关键字为:ng
创建项目:第一步ng new Test 出现绿色字体Ctrl+C终止批处理,因为很卡或出错
第二步在项目文件夹输入 cnpm install 从淘宝镜像中安装
然后用VScode(Visual Studio Code)打开项目或别的软件打开。
官方网站指示:>npm install -g @angular/cli 换成cnpm install -g @angular/cli@latest
>ng new my-dream-app
>cd my-dream-app
>ng serve --open
持久使用:npm config set registry https://registry.npm.taobao.org
验证是否成功:npm config get registry 或npm info express
使用:npm install -g cnpm --registry=https://registry.npm.taobao.org
二〇一九年二月十三日星期三23时37分
Angular项目的目录结构:(网上摘录)
¬组件相关的概念:
1.组件元数据装饰器(@Component)
简称组件装饰器,用来告知Angular框架如何处理一个TypeScript类.
Component装饰器包含多个属性,这些属性的值叫做元数据,Angular会根据这些元数据的值来渲染组件并执行组件的逻辑
2.模板(Template)
我们可以通过组件自带的模板来定义组件的外观,模板以html的形式存在,告诉Angular如何来渲染组件,一般来说,模板看起来很像html,但是我们可以在模板中使用Angular的数据绑定语法,来呈现控制器中的数据。
3.控制器(controller)
控制器就是一个普通的typescript类,他会被@Component来装饰,控制器会包含组件所有的属性和方法,绝大多数的业务逻辑都是写在控制器里的。控制器通过数据绑定与模板来通讯,模板展现控制器的数据,控制器处理模板上发生的事件。
装饰器,模板和控制器是组件的必备要素。还有一些可选的元素,比如:
输入属性(@inputs):是用来接收外部传入的数据的,Angular的程序结构就是一个组件树,输入属性允许在组件树种传递数据 。提供器(providers):这个是用来做依赖注入的 。生命周期钩子(LifeCycle Hooks):一个组件从创建到销毁的过程中会有多个钩子会被触发,类似于Android中的Activity的生命周期 。样式表:组件可以关联一些样式表 。动画(Animations): Angular提供了一个动画包来帮助我们方便的创建一些跟组件相关的动画效果,比如淡入淡出等 。输出属性(@Outputs):用来定义一些其他组件可能需要的事件或者用来在组件之间共享数据
下面我们来看看模块文件
app.module.ts:这个文件表示模块
与AppComponent类似,模块也需要装饰器来装饰。
二〇一九年二月十四日星期四0时3分
腾讯课堂:米斯特吴 《Angular4从入门到实战》之第三讲《Angular4创建组件及设置属性》
运行刚刚创建的Angular项目,命令行进入到Angular\a4app项目目录,输入ng serve --open
或推送出要显示的网页,或者在浏览器地址栏输入:http://localhost:4200/
感觉就是一个web网站在运行,更改index.html等相关文件内容,只要按保存都会自动触发浏览器更新。
项目执行的第一个文件就是项目目录a4app下src目录里面的index.html文件。
在index.html中是无法直接引入自定义的或其他的CSS文件的,必须把CSS文件引入到src目录中的styles.css文件中,此文件本身还可以定义样式(此文件一开始除了一行注释以外是空的)。如:@charset “UTF-8”;@import “test.css”;
感觉src目录下的app目录里面的这五个文件都挺重要的,尤其是这个app.component.ts,里面的title内容一变,网页上的标题立即跟着改变。
app.component.ts文件的内容:
import { Component } from ‘@angular/core’;
@Component({
selector: ‘app-root’, /表示该组件将展示在index.html中的标签中/
templateUrl: ‘./app.component.html’, /声明该组件所应用的模板/
styleUrls: [’./app.component.css’] /声明模板所应用的渲染/
})
export class AppComponent {
title = ‘Hello 世界!’;
}
只要是组件,都会在app目录下创建!
引用组件:先打开a4app中的readme.md,拷贝第11行的ng generate component component-name
再开起来一个终端(因为原来的终端正在运行WEB服务),目录切换到项目目录a4app下,输入刚刚拷贝的命令行:ng generate component 组件名; 也可以用简写的模式ng g c 组件名。
比如新建一个存放组件的文件夹及新建组件:ng g c components/user
于是:在app文件夹下新建了一个components目录,components目录又建了一个user目录,
user目录下面新建了四个文件,分别是组件css、html、ts、spec.ts其spec.ts用于测试的,没用
我们在根组件app的html文件中加入
(因为user的ts文件指定的选择器就是app-user,这与index中设置标签< app-root >如出一辙)
然后,就可以修改user下的html文件的内容和设置ts文件的对应的属性了。
user目录下的app.component.ts
import { Component, OnInit } from ‘@angular/core’;
@Component({
selector: ‘app-user’,
templateUrl: ‘./user.component.html’,
styleUrls: [’./user.component.css’]
})
export class UserComponent implements OnInit {
name = “hemiah”; /添加属性/
constructor() { } /自动创建了两个空的方法/
ngOnInit() { }
}
比如添加了一个name属性。然后,我们就可以在html中用{{name}}来调用这个name属性的值。
user目录下的app.component.ts还可以这样写:
二〇一九年二月十四日星期四2时33分53秒
腾讯课堂:米斯特吴 《Angular4从入门到实战》之第四讲《Angular4操作数据(增删改查)》
user.component.html文件实例:
Hello {{name}}!
- 年龄:{{age}}
- 邮箱:{{email}}
- 地址:{{address.city}}{{address.state}}{{address.street}}
user.component.ts文件实例:
import { Component, OnInit } from ‘@angular/core’;
@Component({
selector: ‘app-user’,
templateUrl: ‘./user.component.html’,
styleUrls: [’./user.component.css’]
})
export class UserComponent implements OnInit { /最外层 包括此行以上,由系统自动生成/
/先定义属性/
name: string;
age: number;
email: string;
address: Address;
hobbies: string[];
hello: any;
isEdit:boolean = false;
constructor() { /在函数中注入依赖就可以作为类的属性被使用了/
console.log(“constructor ran …”);
}
ngOnInit() { /此方法内给属性赋值,系统生成的空函数/
console.log(“ngOnInit ran …”);
this.name = “Hemiah”;
this.age = 30;
this.email = "test@test.com";
this.address = {
street: “定泗路”,
city: “北京”,
state: “昌平区”
};
this.hobbies = [“写代码”, “看电影”, “听音乐”];
}
/再定义方法/
onClick() {
// console.log(123);
this.name = “Mr.Wu”;
this.hobbies.push(“New Hobby”); /push追加到后面/
}
addHobby(hobby){
// console.log(hobby);
this.hobbies.unshift(hobby); /* unshift插入到前面*/
return false;
}
deleteHobby(i){
this.hobbies.splice(i,1); /splice删除,从下标开始1个项目/
}
toggleEdit(){
this.isEdit= !this.isEdit;
}
} /最外层/
interface Address{ /外层以外自定义数据类型/
street:string,
city:string,
state:string
}
大致捋了一下执行过程:
1、 系统最先执行index.html,遇到其中的标签则去执行
2、 app.component.ts文件声明的选择器selector:app-root。此文档的两个语句分别指向了两个文件
styleUrls: [’./app.component.css’];templateUrl: ‘./app.component.html’,
3、 执行./app.component.html,引出文件中的标签,然后去执行
4、 user.component.ts文件中生命的选择器:selector:app-user。此文档包含两个语句:
styleUrls: [’./user.component.css’];templateUrl: ‘./user.component.html’,
5、最后执行:./user.component.html
ts文件类似于JavaScript文件,不过,困惑的是,为什么html文件中没有引用语句呢?
二〇一九年二月十四日星期四5时32分43秒
二〇一九年二月十四日星期四12时10分29秒
腾讯课堂:米斯特吴 《Angular4从入门到实战》之第五讲《Angular4核心功能Service》
What Is Service?
服务主要应用于多个组件中的数据管理;
可以让组件更干净;
DRY—Don’t Repeat Yourself;
通过HTTP Module对数据进行增删改查。
创建服务的步骤:
创建一个新文件 /services/my-service.service.ts
import@Injectable并且创建class;
引入Service并添加到procide中;
任何组件需要使用需要引入并创建对象调用。
也使用命令创建Service:
ng g service services/my-service
会自动帮助我们创建文件以及写入对应的class
我们需要手动将Service添加到procider中
二〇一九年二月十四日星期四22时29分
腾讯课堂:米斯特吴 《Angular4从入门到实战》之第六讲《Angular4创建及使用Service》
Angular>a4app> ng g c components/home 创建一个新组件
ng serve --open 启动web服务
修改app.component.html 把标签换成:指向新组件
在app目录下手动创建一个目录services,在目录中手动创建一个文件data.service.ts
手动添加初步代码如下:
import {Injectable} from ‘@angular/core’; /引入Injectable/
@Injectable() /调用Injectable/
export class DataService{ /导出数据/
users:string[];
constructor(){
this.users=[“米斯特吴”,“Ac总有一天”,“吴海洋”]
}
getUsers(){
return this.users; /准备给home.component.html返回数据/
}
}
准备把data.service.ts中的数据返回给home.component.html
首先要在app.module.ts中要引入 import { DataService} from ‘./services/data.service’;
并放入此文件的提供器中:providers:[DataService], 这一行代码很重要!
接下来就可以使用了,比如在home.componet.ts中,先引入这个服务:
import { DataService} from ‘…/…/services/data.service’;
然后改造已有的空构造函数constructor(){}如下:
users:string[];
constructor(public dataService:DataService) {
// console.log(this.dataService.getUsers());
this.users=this.dataService.getUsers();
}
然后就可以在home.componet.html中拿到home.componet.ts中的数据了!
Hello World!
比如,在user组件中引入,第一步,在user.componet.ts中引入
import { DataService} from ‘…/…/services/data.service’;
第二步:在constructor也创建好:constructor(public dataService:DataService){}
然后,返回home.componet.ts定义一个数组:users:string[];
然后再回到user.componet.ts中定义一个数组如下:
users:string[];
constructor(public dataService:DataService) {
this.users=this.dataService.getUsers();
}
其实就是改造user.componet.ts文件,添加引入,定义构造函数引入,然后引入!
接下在在user.componet.html中加入home.componet.html中的类似语句的数据引用,数据就顺利的引入到了user.componet.html中来了。
最后,最后,来到app.componet.html中,通过修改标签或是就可以重定向选择器,来拿取不同的数据了。这样就达到数据统一管理的目的!!!!!
接下来的例子user是不用的,这里仅仅是演示数据的管理的便利性。
在html中引入一些好看的样式:
www.bootswatch.com
点击Cosmo的DOWNLOAD
出现页面:https://bootswatch.com/4/cosmo/bootstrap.min.css,拿到CDN(内容分发网络)也就是这个网址名字。
然后,在index.html中引入:
Hello World!
二〇一九年二月十五日星期五1时4分33秒
腾讯课堂:米斯特吴 《Angular4从入门到实战》之第七讲《Angular4 ES7中的观察者对象Observable》
ES7不隶属于Angular但后面的知识要用到它:
首先在data.service.ts中引入Observable: import {Observable} from ‘rxjs’;
然后定义一个新的数据类型:data:Observable<Array>;然后修改getUsers(){}
getUsers(){
// return this.users; /准备给home.component.html返回数据/
this.data = new Observable(observer=>{
//让我们当前的data,等于新创建起来的Observable对象,对象里面会有对应的
//给我们传输的数据,括号里面的是回调函数,我们用箭头函数,在箭头函数中,
//我们想让它每隔1秒传输对应的数据,然后在我们的页面展示出来实时获取到的数据
//我们传的数据就相当于我们get请求的数据
setTimeout(()=>{ /我们同样用回调函数/
observer.next(1);
},1000);
setTimeout(()=>{observer.next(2);},2000);setTimeout(()=>{observer.next(3);},3000);setTimeout(()=>{observer.next(4);},4000);setTimeout(()=>{observer.complete();},5000);});
return this.data; /*这是非常关键的一个语句,用于返回数据 */
}
然后,在home.component.ts中引用数据:
data:any[]=[]; /定义一个空数组/
constructor(public dataService:DataService) {
// console.log(this.dataService.getUsers());
// this.users=this.dataService.getUsers();
//Observable
this.dataService.getUsers().subscribe(data=>{ /用订阅者模式拿到数据/
// console.log(data);
this.data.push(data); /把data push进来/
})
}
最后通过home.componet.html达到最终引用到页面之目的:(ts只能引用到控制台层面)
Hello World!
二〇一九年二月十五日星期五2时46分18秒
腾讯课堂:米斯特吴 《Angular4从入门到实战》之第八讲《Angular4使用Http中Get获取网络接口数据》
第一步:
在app.module.ts引入一个get请求:
Angular 4.3 版本后,推荐使用 HttpClient,可以参考 Angular HTTP Client 快速入门
所以,把import { HttpModule} from ‘@angular/http’;
改为:import { HttpClientModule} from ‘@angular/common/http’;
然后,在imports:[]中再引入一下:HttpClientModule
第二步:
在services中使用HTTP,打开:data.service.ts:先把把有关Observable的有关内容清除
然后引入HTTP:(视频中的老版本在我这新版本上还真的出问题,干脆百度一下,一次解决)
引入的命令为:import { HttpClient} from ‘@angular/common/http’;
(视频中的为:import { Http} from ‘@angular/http’;)
然后用constructor创建对象http(名字任意起),以后用这个对象来调用get,pot,post,delet等:
constructor(public http:Http){ }
然后:我们把请求的数据在getUsers(){}中return回去,get中就可以放请求数据的接口:
(模拟数据接口:打开网站http://jsonplaceholder.typicode.com/请求Resources的users)
return this.http.get("http://jsonplaceholder.typicode.com/users ")
返回数据时,其实是返回的观察者对象Observable要用到map方法,由于不能直接调用,所以,必须在文件头引入:import ‘rxjs/add/operator/map’; 这一句老是报错!!!!!!取消就不会报错!
然后再getUsers(){}中加入.map(res=>res.json()); 这句也报错!!!只好也取消!
好像这两行取消了,后台依然能够抓取到网页的数据,是不是Angular新版本已经用HttpClient把这两个功能实现了呀?
接下来:在home.component.ts
constructor(public dataService:DataService) {
this.dataService.getUsers().subscribe(users=>{ /观察者对象下的订阅者模式/
console.log(users); 观察控制台的数据输出否?
})
}
如果数据输出正确,则注释掉控制台输出,添加如下代码:
constructor(之前):users:any[];
constructor中添加:this.users = users; 把订阅者模式抓取到的数据users赋给了本组件声明的数组users[]里面来了。users数组于是就有了数据,html就可以使用他们了。
最后,在home.component.html中添加:
Hello World!
下面这篇文章感觉挺权威了:
《从Angular 4开始,Angular的http请求改用HttpClient。》
添加HttpClientModule
首先需要引入HttpClientModule,它需要放在BrowserModule后:
import { NgModule } from ‘@angular/core’;
import { BrowserModule } from ‘@angular/platform-browser’;
import { HttpClientModule } from ‘@angular/common/http’;
@NgModule({
imports: [
BrowserModule,
HttpClientModule,
],
declarations: [
AppComponent,
],
bootstrap: [ AppComponent ]
})
export class AppModule {}
请求JSON数据
import { Injectable } from ‘@angular/core’;
import { HttpClient } from ‘@angular/common/http’;
@Injectable()
export class ConfigService {
constructor(private http: HttpClient) { }
getData() {
return this.http.get(this.dataUrl);
}
}
HttpClient其中一个特性是默认返回的数据为json数据。,使用它返回的数据如下:
http.get(url).subscribe(…)
对于angular 4之前,则需要做json转换:
http.get(url).map(res => res.json()).subscribe(…)
请求非JSON数据
如果需要返回非JSON数据,则需要在请求时设置responseType头信息为text:
getTextFile(filename: string) {
return this.http.get(filename, {responseType: ‘text’})
.pipe(
tap(
data => this.log(filename, data),
error => this.logError(filename, error)
)
);
}
http.get()返回的是一个Observable
2/15/2019 6:42:47 AM
结论是:在data.service.ts中的这两句没有必要添加了,因为HttpClient其中一个特性是默认返回的数据为json数据,从Angular4.X以后的版本,就不在需要如下设置啦:
import { Http} from ‘@angular/http’;
.map(res=>res.json());
二〇一九年二月十五日星期五15时20分
腾讯课堂:米斯特吴 《Angular4从入门到实战》之第九讲《Angular4使用Http中的Post传递数据》
先注释掉user中ts和html中的Observable,其实已经注释掉了,只是标注Observable注释标记而已
接下来开始操作home.component.html文件了…
Hello World!
}
onSubmit(){this.dataService.addUser(this.user).subscribe(user=>{// console.log(user); /*查看控制台输出*/this.users.unshift(user); /*直接显示在html页面中*/})
}
然后在data.service.ts中实现addUser这个方法:不再.map(res=>res.json())
addUser(user){
return this.http.post(“http://jsonplaceholder.typicode.com/users”,user)
}
2/15/2019 4:29:31 PM16:29:08
二〇一九年二月十五日星期五16时30分
腾讯课堂:米斯特吴 《Angular4从入门到实战》之第十讲《Angular4使用Http中的Delete删除数据》
在home.component.html中的ul标签后添加删除按钮
<button (click)=“onDeleteClick(user.id)” class=“btn btn-danger”>删除
然后在ts里面home.component.ts来实现onDeleteClick()方法:
onDeleteClick(id){
// console.log(id);
this.dataService.deleteUser(id).subscribe(res=>{
})
}
自定义一个方法deleteUser(id)。
然后,再在data.service.ts中实现这个deleteUser(id)方法:
deleteUser(id){
return this.http.delete(“http://jsonplaceholder.typicode.com/users/”+id)
}
然后在ts里面home.component.ts来进一步实现onDeleteClick()方法的删除动作:
然后在ts里面home.component.ts来实现onDeleteClick()方法:
onDeleteClick(id){
// console.log(id);
this.dataService.deleteUser(id).subscribe(res=>{
for(let i=0;i<this.users.length;i++){
if(this.users[i].id==id){
this.users.splice(i,1);
}
}
})
}
这样就测试成功了。删除就可以操作了。不过,刷新页面,删除的数据又回来来了,是因为网站提供的数据是测试数据,不能被真正的删除。
2/15/2019 5:50:48 PM
二〇一九年二月十五日星期五19时48分
腾讯课堂:米斯特吴 《Angular4从入门到实战》之第11讲《Angular4使用Http中的put更新数据》
先在hpme.component.html添加编辑按钮:
<button (click)=“onEditClick(user)” class=“btn btn-danger”>编辑
第二步:在home.component.ts定义onEditClick()这个按钮:
由于编辑要与输入共用一个框,所以,要先定义:
isEdit:boolean=false;
然后:
onEditClick(user){
this.isEdit=true;
this.user=user; /先把值传到输入框(编辑框)内/
}
把onSubmit()赋参数:onSubmit(isEdit) 以接收其值,定义了一个新的方法updataUser(this.user)。
onSubmit(isEdit){
if (isEdit){ /如果isEdit=true则执行put方法进行编辑编辑/
this.dataService.updataUser(this.user).subscribe(user=>{
//删除当前的
for(let i=0;i<this.users.length;i++){
if(this.users[i].id==this.user.id){
this.users.splice(i,1);
}
}
//添加更新的
this.users.unshift(this.user);
})
} else { /如果isEdit=fales则执行post方法/
this.dataService.addUser(this.user).subscribe(user=>{
// console.log(user); /查看控制台输出/
this.users.unshift(user); /直接显示在html页面中/
})
}
}
把html中的form做相应修改:<form (submit)=“onSubmit(isEdit)”>
如果isEdit传过来的是false,则执行post;如果是true则执行put(编辑)!
为了让home.component.ts中心的方法updataUser(this.user)起作用,要在data.service.ts中进行设定:
updataUser(user){
return this.http.put(“http://jsonplaceholder.typicode.com/users/”+user.id,user)
}
2/15/2019 9:07:15 PM
二〇一九年二月十五日星期五21时11分
腾讯课堂:米斯特吴 《Angular4从入门到实战》之第12讲《Angular4核心模块Router》
路由就是解决从一个视图到另一个视图的导航,也就是不经过网络请求,刷新页面的情况下跳转到另一个页面。速度非常快。
路由的基本步骤:
这是,在地址栏输入:http://localhost:4200
http://localhost:4200/user
将显示不同的网页。
不过,这个路由还不够智能,需要继续下面的步骤:
创建一个导航的组件:
在控制台,切换到D:\Angular\a4app>执行:ng g c components/navbar
PS D:\Angular\a4app> ng g c components/navbar
CREATE src/app/components/navbar/navbar.component.html (25 bytes)
CREATE src/app/components/navbar/navbar.component.spec.ts (628 bytes)
CREATE src/app/components/navbar/navbar.component.ts (269 bytes)
CREATE src/app/components/navbar/navbar.component.css (0 bytes)
UPDATE src/app/app.module.ts (985 bytes)
PS D:\Angular\a4app>
新建的navbar自动更新到了app.module.ts中去了,也就是,多了一条语句:
import { NavbarComponent } from ‘./components/navbar/navbar.component’;
@NgModule中的declarationts:[]也引入了一行:NavbarComponent
然后在navbar.component.html添加导航,为了便捷,到bootstrap网站抓一个导航过来:
百度bootstrap中文网www.bootcss.com Bootstrap3中文文档(v3.3.7)
下载Bootstrap点击右侧导航“实例精选”点击Bootstrap框架的基本用法下面左侧窗口
出现Bootstrap starter template页面后右键查看源码,或Ctrl-U查看源码,或省去前面的所有步骤,直接在地址栏输入:view-source:https://v3.bootcss.com/examples/starter-template/ 查看源码,把导航的这部分拷贝到navbar.component.html中:
二〇一九年二月十六日星期六0时8分
腾讯课堂:米斯特吴 《Angular4从入门到实战》之第13讲《公益广告》
腾讯课堂:米斯特吴 《Angular4从入门到实战》之第14讲《Angular4核心模块Router参数》
路由参数就是在访问的网址上加上不同的参数而跳转到不同的页面。
第一步:再到a4app创建一个新组件:ng g c components/userDetail
第二步:在app.module.ts里除了自动更新的引入新组件,还要写路由参数:
const appRoutes:Routes = [
{ path: ‘’,component:HomeComponent},
{ path: ‘user’,component:UserComponent},
{ path: ‘user/:id’,component:UserDetailComponent},
];
第三步:到user-detail.component.ts中获取路由参数:
import { Router,ActivatedRoute,Params} from ‘@angular/router’;
并在contructor(){}做相关的定义:
constructor(
private route:ActivatedRoute,
private router:Router
) {
this.route.params.subscribe((params:Params)=>{console.log(params.id);
})
}
到浏览器地址栏输入:http://localhost:4200/user/1,就可跳转到user-detail work!中,说明连接成功
接下来继续设置:
打开home.component.html设置a标签
<a class=“btn btn-primary pull-right” [(routerLink)]="’/user/’+user.id">详情
接下来根据我们的ID,请求其所对应的数据:在user-detail.component.ts
id:number;
this.route.params.subscribe((params:Params)=>{
// console.log(params.id);
this.id=params.id;
})
}
再把服务引进来:
import {DataService} from ‘…/…/services/data.service’;
于是我们就可以在data.service.ts中的添加方法:
getSingleUser(id){
return this.http.get(“http://jsonplaceholder.typicode.com/users/”+id)
}
接下来,在user-detail.component.ts调用这个方法:
public dataServicde:DataService,
ngOnInit() {
this.dataServicde.getSingleUser(this.id).subscribe((user)=>{
console.log(user);
})
}
再添加:user:object={};
最后,我们就可以在user-detail.component.html中实现这个代码:
用户详情
- {{user.id}}
- {{user.name}}
- {{user.email}}
- {{user.phone}}
- {{user.website}}
顺利通过!
user-detail.component.ts完整代码:
import { Component, OnInit } from ‘@angular/core’;
import { Router,ActivatedRoute,Params} from ‘@angular/router’;
import {DataService} from ‘…/…/services/data.service’;
@Component({
selector: ‘app-user-detail’,
templateUrl: ‘./user-detail.component.html’,
styleUrls: [’./user-detail.component.css’]
})
export class UserDetailComponent implements OnInit {
id:number;
user:object={};
constructor(
public dataServicde:DataService,
private route:ActivatedRoute,
private router:Router
) {
this.route.params.subscribe((params:Params)=>{// console.log(params.id);this.id=params.id;
})
}
ngOnInit() {
this.dataServicde.getSingleUser(this.id).subscribe((user)=>{
// console.log(user);
this.user=user;
})
}
}
data.service.ts完整代码:
import {Injectable} from ‘@angular/core’; /引入Injectable/
import { HttpClient} from ‘@angular/common/http’;
// import ‘rxjs/add/operator/map’; HttpClient返回的就是json数据了,所以这个引入废弃了
@Injectable() /调用Injectable/
export class DataService{
constructor(public http:HttpClient){ /创建对象http以此调用get、post等/
}
getSingleUser(id){
return this.http.get(“http://jsonplaceholder.typicode.com/users/”+id)
}
getUsers(){
return this.http.get(“http://jsonplaceholder.typicode.com/users”)
// .map(res => res.json()); HttpClient返回的就是json数据了,所以不再需要转换了
}
addUser(user){
return this.http.post(“http://jsonplaceholder.typicode.com/users”,user)
}
deleteUser(id){
return this.http.delete(“http://jsonplaceholder.typicode.com/users/”+id)
}
updataUser(user){
return this.http.put(“http://jsonplaceholder.typicode.com/users/”+user.id,user)
}
}
app.module.ts完整代码:
import { BrowserModule } from ‘@angular/platform-browser’;
import { NgModule } from ‘@angular/core’;
import { FormsModule} from ‘@angular/forms’;
import { HttpClientModule} from ‘@angular/common/http’;
import { RouterModule,Routes} from ‘@angular/router’;
import { AppComponent } from ‘./app.component’;
import { UserComponent } from ‘./components/user/user.component’;
import { HomeComponent } from ‘./components/home/home.component’;
import { DataService} from ‘./services/data.service’;
import { NavbarComponent } from ‘./components/navbar/navbar.component’;
import { UserDetailComponent } from ‘./components/user-detail/user-detail.component’;
const appRoutes:Routes = [
{ path: ‘’,component:HomeComponent},
{ path: ‘user’,component:UserComponent},
{ path: ‘user/:id’,component:UserDetailComponent},
];
@NgModule({
declarations: [
AppComponent,
UserComponent,
HomeComponent,
NavbarComponent,
UserDetailComponent
],
imports: [
BrowserModule,
FormsModule,
HttpClientModule,
RouterModule.forRoot(appRoutes)
],
providers: [DataService],
bootstrap: [AppComponent]
})
export class AppModule { }
本视频课程基本完结了,后面还有一个具体的代码2/16/2019 1:24:23 AM
二〇一九年二月十六日星期六1时25分27秒总用时两天半 要熟练还得具体项目磨炼
如若内容造成侵权/违法违规/事实不符,请联系编程学习网邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!
相关文章
- 回应『Angular有哪些地方比Vue更优秀?』
声明:本篇文章摘自:https://zhuanlan.zhihu.com/p/28284087,希望与更多Web前端小伙伴学习更多知识 想了解更多的知识,请加入627336556 技术开发交流群,会有意想不到的收获~~~!!!各种…...
2024/5/6 17:00:15 - Git-commit-plugin For Vscode 一款自动生成规范git提交信息的插件
初衷 在公司由于大家随意提交 git-commit 的信息,导致提交的风格千奇百怪,写的信息不明确,不知道这次提交具体是修复 bug 呢?还是增加新功能,还是单纯改了一些配置文件,亦或是重构了一些不好的代码。只能靠…...
2024/5/5 16:38:33 - Angular 从0到1 (一)
2019独角兽企业重金招聘Python工程师标准>>> 第一节:认识Angular 2.0 前言 Angular 2 是Google推出的一个跨平台全终端的框架,和目前比较火的React和Vue.js相比,有如下优点: 由于Google的目的是推出一个完整解决方案&a…...
2024/4/22 1:23:07 - 前端开发环境搭建(angular)
ps:对于vscode和nodejs,官网的,zip版本-完整的软件,不用运行install安装;非zip版本-需要运行install安装vscode安装 1、百度搜索vscode,进入官网【官网地址】,选择对应zip版本下载(速…...
2024/4/21 9:39:08 - angular基础笔记2
前面把基本环境搭建好了并且也创建了基础项目,我们需要对目录结构进行一个大致了解,在此可以查看angular中文官网的详细介绍 https://angular.cn/guide/quickstart,其实只要大概过一遍就行,后面接触慢慢了解,官网虽然写…...
2024/4/21 10:58:28 - vscode python3 配置生成任务
一直用sublime,但是ubuntu下输入中文有问题,解决起来太麻烦; pycharm太重。虚拟机一开Chrome打开10几个页面,然后再运行pycharm,静音轻薄笔记本CPU和8G内存基本都占满,风扇狂转,高频噪音从小本一…...
2024/4/21 4:18:27 - MVC与MVVM区别?
在MVC里,View是可以直接访问Model的!从而,View里会包含Model信息,不可避免的还要包括一些业务逻辑。 MVC模型关注的是Model的不变,所以,在MVC模型里,Model不依赖于View,但是 View…...
2024/4/21 3:38:32 - 2018/11/15浅谈MVC、MVP、MVVM之间的区别以及初探AngularJS心得
文章目录浅谈MVC、MVP、MVVM1、MVC-Model、View、Controller三者如何联系?2、MVP3、MVVMAngularJS的学习Ng简介这些基础概念很重要可以这样来理解 AngularJS应用编写自定义指令自定义过滤器,同自定义指令类似,使用方法与自带的过滤器使用方法…...
2024/4/21 16:50:01 - MVC,MVP 和 MVVM
MVC和MVVM的区别 MVC(Model-View-Controller)是最常见的软件架构之一,它本身很容易理解,但是要讲清楚,它与衍生的 MVP 和 MVVM 架构的区别就不容易了。 什么是MVC MVC模式的意思是,软件可以分成三个部分…...
2024/4/22 1:19:42 - 【Angular】MVVM设计模式
MVVM(Model-View-ViewModel) MVVM框架是MVP模式与WPF结合的一种新型架构框架。 MVC & MVP 相似点: Controller/Presenter负责逻辑的处理,Model提供数 据,View负责显示。 二者区别: MVC:Vie…...
2024/4/21 12:12:05 - 关于MVVM的面试问题
一.了解mvvm框架吗? vue.js react.js angular.js (一定要想好说哪个,后面的话题都会围绕该框架继续延伸) 二.谈谈你对MVVM的认识? 1.先说mvc:所有通信都是单向的:提交一次反馈一次,通信一次相互制约。…...
2024/4/21 14:43:56 - MVC MVVM
复杂的软件必须有清晰合理的架构,否则无法开发和维护。 MVC(Model-View-Controller)是最常见的软件架构之一,业界有着广泛应用。它本身很容易理解,但是要讲清楚,它与衍生的 MVP 和 MVVM 架构的区别就不容易…...
2024/4/21 8:54:23 - mvc,mvvm,mvp
前端中容易提起的mv* 框架: mvc(model-view-controller),mvp(Model-view-presenter),mvvm(model-view viewModel) 首先要知道最基本的mvc模式: mvc是三个单…...
2024/4/21 23:32:46 - MVC MVVM MVP Backbone 互动模式 架构模式总结分析
一、MVC MVC模式的意思是,软件可以分成三个部分。 视图(View):用户界面。 控制器(Controller):业务逻辑 模型(Model):数据保存 各部分之间的通信方式如下。 V…...
2024/4/23 8:28:40 - Angular2学习笔记.2、绑定、ngFor和ngIf指令、MVVM分离、DisplayingData
本篇概述 本片为Anguar2学习笔记的第二篇文章,将会讲述Angular2的数据绑定功能(仅涉及单向),ngFor、ngIf指令的使用以及如果分离MVVM。 本片内容参照官方文档DisplayingData。 工程演示 工程结构 这次我们来建立一个新的工程…...
2024/4/23 5:53:03 - 常用前端框架:mvc mvp mvvm
今天看了阮大大的博客,让我对常用的前端框架类型有了比较清晰的认识。 原来我常用的框架:Angular Vue 都属于MVVM 有机会一定要体验MVC框架:比如, backbone.js。 链接:http://www.ruanyifeng.com/blog/2015/02/mvcmvp_mvvm.html 转…...
2024/4/23 15:34:17 - 前端框架模式MVC、MVVM和MVP的讲解
复杂的软件必须有清晰合理的架构,否则无法开发和维护。 MVC(Model-View-Controller)是最常见的软件架构之一,业界有着广泛应用。 除了MCV模式还有MVVM和MVP模式,下边就来介绍下着三种模式: 一. MVC模式的意…...
2024/4/23 12:13:49 - Vue基础和MVC,MVP,MVVM简介
Vue.js 一、Vue基础 1 开发流程规范 与 Vue基础 1.0 前端开发流程规范 前端开发流程规范 1.1 前端框架发展历史 htmlhtml [1990]----> html5 [2008.1.12]csscss 1.0 1996 css 2.0 1998css 3.0 2001EcmaScript 1997年诞生2015 EcmaScript 20152016 EcmaScript 2016 …...
2024/4/24 1:03:50 - mvc mvp mvvm
一:MVC(Model-View-Controller)是最常见的软件架构之一,业界有着广泛应用。 1:MVC 视图(View):用户界面。 控制器(Controller):业务逻辑 模型(M…...
2024/4/23 9:11:01 - MVC和MVVM的真正区别
MVC MVC 是 Model-View- Controller 的简写。即模型-视图-控制器。M 和 V 指的意思和 MVVM 中的 M 和 V 意思一样。C 即 Controller 指的是页面业务逻辑。使用 MVC 的目的就是将 M 和 V 的代码分离。MVC 是单向通信,也就是 View 跟 Model,必须通过 Contr…...
2024/4/23 15:52:29
最新文章
- vue如何实现异步组件
在 Vue 中实现异步组件,通常是为了在需要时加载组件,从而优化应用的性能,特别是当组件很大或者只在某些特定条件下才需要时。Vue 提供了几种方式来定义和使用异步组件。 1. 使用 import() 语法 你可以使用 ES6 的 import() 语法来动态地导入…...
2024/5/6 23:57:40 - 梯度消失和梯度爆炸的一些处理方法
在这里是记录一下梯度消失或梯度爆炸的一些处理技巧。全当学习总结了如有错误还请留言,在此感激不尽。 权重和梯度的更新公式如下: w w − η ⋅ ∇ w w w - \eta \cdot \nabla w ww−η⋅∇w 个人通俗的理解梯度消失就是网络模型在反向求导的时候出…...
2024/5/6 9:38:23 - Python读取文件里内容
如果要读取一个文件里的内容是 # 文件名:db.txt 1 2 3 4代码如下 import requests f open("db.txt", mode"rb") content f.read() f.close()data content.decode(utf-8)# 存到 list 里 data_list data.split(\r\n) print(data_list)# 结果…...
2024/5/5 8:37:34 - JVM(Java虚拟机)
文章目录 一、JVM简介1.1 JVM概念1.2 什么是Java虚拟机呢?Java虚拟机的好处是什么呢? 二、JVM整体组成部分三、类加载器3.1 类加载子系统3.2 类加载过程3.2.1 装载(Load)3.2.2 链接(Link)3.2.3 初始化(Initialize) 四、运行时数据区4.1 方法区࿰…...
2024/5/6 8:33:36 - 【外汇早评】美通胀数据走低,美元调整
原标题:【外汇早评】美通胀数据走低,美元调整昨日美国方面公布了新一期的核心PCE物价指数数据,同比增长1.6%,低于前值和预期值的1.7%,距离美联储的通胀目标2%继续走低,通胀压力较低,且此前美国一季度GDP初值中的消费部分下滑明显,因此市场对美联储后续更可能降息的政策…...
2024/5/4 23:54:56 - 【原油贵金属周评】原油多头拥挤,价格调整
原标题:【原油贵金属周评】原油多头拥挤,价格调整本周国际劳动节,我们喜迎四天假期,但是整个金融市场确实流动性充沛,大事频发,各个商品波动剧烈。美国方面,在本周四凌晨公布5月份的利率决议和新闻发布会,维持联邦基金利率在2.25%-2.50%不变,符合市场预期。同时美联储…...
2024/5/4 23:54:56 - 【外汇周评】靓丽非农不及疲软通胀影响
原标题:【外汇周评】靓丽非农不及疲软通胀影响在刚结束的周五,美国方面公布了新一期的非农就业数据,大幅好于前值和预期,新增就业重新回到20万以上。具体数据: 美国4月非农就业人口变动 26.3万人,预期 19万人,前值 19.6万人。 美国4月失业率 3.6%,预期 3.8%,前值 3…...
2024/5/4 23:54:56 - 【原油贵金属早评】库存继续增加,油价收跌
原标题:【原油贵金属早评】库存继续增加,油价收跌周三清晨公布美国当周API原油库存数据,上周原油库存增加281万桶至4.692亿桶,增幅超过预期的74.4万桶。且有消息人士称,沙特阿美据悉将于6月向亚洲炼油厂额外出售更多原油,印度炼油商预计将每日获得至多20万桶的额外原油供…...
2024/5/6 9:21:00 - 【外汇早评】日本央行会议纪要不改日元强势
原标题:【外汇早评】日本央行会议纪要不改日元强势近两日日元大幅走强与近期市场风险情绪上升,避险资金回流日元有关,也与前一段时间的美日贸易谈判给日本缓冲期,日本方面对汇率问题也避免继续贬值有关。虽然今日早间日本央行公布的利率会议纪要仍然是支持宽松政策,但这符…...
2024/5/4 23:54:56 - 【原油贵金属早评】欧佩克稳定市场,填补伊朗问题的影响
原标题:【原油贵金属早评】欧佩克稳定市场,填补伊朗问题的影响近日伊朗局势升温,导致市场担忧影响原油供给,油价试图反弹。此时OPEC表态稳定市场。据消息人士透露,沙特6月石油出口料将低于700万桶/日,沙特已经收到石油消费国提出的6月份扩大出口的“适度要求”,沙特将满…...
2024/5/4 23:55:05 - 【外汇早评】美欲与伊朗重谈协议
原标题:【外汇早评】美欲与伊朗重谈协议美国对伊朗的制裁遭到伊朗的抗议,昨日伊朗方面提出将部分退出伊核协议。而此行为又遭到欧洲方面对伊朗的谴责和警告,伊朗外长昨日回应称,欧洲国家履行它们的义务,伊核协议就能保证存续。据传闻伊朗的导弹已经对准了以色列和美国的航…...
2024/5/4 23:54:56 - 【原油贵金属早评】波动率飙升,市场情绪动荡
原标题:【原油贵金属早评】波动率飙升,市场情绪动荡因中美贸易谈判不安情绪影响,金融市场各资产品种出现明显的波动。随着美国与中方开启第十一轮谈判之际,美国按照既定计划向中国2000亿商品征收25%的关税,市场情绪有所平复,已经开始接受这一事实。虽然波动率-恐慌指数VI…...
2024/5/4 23:55:16 - 【原油贵金属周评】伊朗局势升温,黄金多头跃跃欲试
原标题:【原油贵金属周评】伊朗局势升温,黄金多头跃跃欲试美国和伊朗的局势继续升温,市场风险情绪上升,避险黄金有向上突破阻力的迹象。原油方面稍显平稳,近期美国和OPEC加大供给及市场需求回落的影响,伊朗局势并未推升油价走强。近期中美贸易谈判摩擦再度升级,美国对中…...
2024/5/4 23:54:56 - 【原油贵金属早评】市场情绪继续恶化,黄金上破
原标题:【原油贵金属早评】市场情绪继续恶化,黄金上破周初中国针对于美国加征关税的进行的反制措施引发市场情绪的大幅波动,人民币汇率出现大幅的贬值动能,金融市场受到非常明显的冲击。尤其是波动率起来之后,对于股市的表现尤其不安。隔夜美国股市出现明显的下行走势,这…...
2024/5/6 1:40:42 - 【外汇早评】美伊僵持,风险情绪继续升温
原标题:【外汇早评】美伊僵持,风险情绪继续升温昨日沙特两艘油轮再次发生爆炸事件,导致波斯湾局势进一步恶化,市场担忧美伊可能会出现摩擦生火,避险品种获得支撑,黄金和日元大幅走强。美指受中美贸易问题影响而在低位震荡。继5月12日,四艘商船在阿联酋领海附近的阿曼湾、…...
2024/5/4 23:54:56 - 【原油贵金属早评】贸易冲突导致需求低迷,油价弱势
原标题:【原油贵金属早评】贸易冲突导致需求低迷,油价弱势近日虽然伊朗局势升温,中东地区几起油船被袭击事件影响,但油价并未走高,而是出于调整结构中。由于市场预期局势失控的可能性较低,而中美贸易问题导致的全球经济衰退风险更大,需求会持续低迷,因此油价调整压力较…...
2024/5/4 23:55:17 - 氧生福地 玩美北湖(上)——为时光守候两千年
原标题:氧生福地 玩美北湖(上)——为时光守候两千年一次说走就走的旅行,只有一张高铁票的距离~ 所以,湖南郴州,我来了~ 从广州南站出发,一个半小时就到达郴州西站了。在动车上,同时改票的南风兄和我居然被分到了一个车厢,所以一路非常愉快地聊了过来。 挺好,最起…...
2024/5/4 23:55:06 - 氧生福地 玩美北湖(中)——永春梯田里的美与鲜
原标题:氧生福地 玩美北湖(中)——永春梯田里的美与鲜一觉醒来,因为大家太爱“美”照,在柳毅山庄去寻找龙女而错过了早餐时间。近十点,向导坏坏还是带着饥肠辘辘的我们去吃郴州最富有盛名的“鱼头粉”。说这是“十二分推荐”,到郴州必吃的美食之一。 哇塞!那个味美香甜…...
2024/5/4 23:54:56 - 氧生福地 玩美北湖(下)——奔跑吧骚年!
原标题:氧生福地 玩美北湖(下)——奔跑吧骚年!让我们红尘做伴 活得潇潇洒洒 策马奔腾共享人世繁华 对酒当歌唱出心中喜悦 轰轰烈烈把握青春年华 让我们红尘做伴 活得潇潇洒洒 策马奔腾共享人世繁华 对酒当歌唱出心中喜悦 轰轰烈烈把握青春年华 啊……啊……啊 两…...
2024/5/4 23:55:06 - 扒开伪装医用面膜,翻六倍价格宰客,小姐姐注意了!
原标题:扒开伪装医用面膜,翻六倍价格宰客,小姐姐注意了!扒开伪装医用面膜,翻六倍价格宰客!当行业里的某一品项火爆了,就会有很多商家蹭热度,装逼忽悠,最近火爆朋友圈的医用面膜,被沾上了污点,到底怎么回事呢? “比普通面膜安全、效果好!痘痘、痘印、敏感肌都能用…...
2024/5/5 8:13:33 - 「发现」铁皮石斛仙草之神奇功效用于医用面膜
原标题:「发现」铁皮石斛仙草之神奇功效用于医用面膜丽彦妆铁皮石斛医用面膜|石斛多糖无菌修护补水贴19大优势: 1、铁皮石斛:自唐宋以来,一直被列为皇室贡品,铁皮石斛生于海拔1600米的悬崖峭壁之上,繁殖力差,产量极低,所以古代仅供皇室、贵族享用 2、铁皮石斛自古民间…...
2024/5/4 23:55:16 - 丽彦妆\医用面膜\冷敷贴轻奢医学护肤引导者
原标题:丽彦妆\医用面膜\冷敷贴轻奢医学护肤引导者【公司简介】 广州华彬企业隶属香港华彬集团有限公司,专注美业21年,其旗下品牌: 「圣茵美」私密荷尔蒙抗衰,产后修复 「圣仪轩」私密荷尔蒙抗衰,产后修复 「花茵莳」私密荷尔蒙抗衰,产后修复 「丽彦妆」专注医学护…...
2024/5/4 23:54:58 - 广州械字号面膜生产厂家OEM/ODM4项须知!
原标题:广州械字号面膜生产厂家OEM/ODM4项须知!广州械字号面膜生产厂家OEM/ODM流程及注意事项解读: 械字号医用面膜,其实在我国并没有严格的定义,通常我们说的医美面膜指的应该是一种「医用敷料」,也就是说,医用面膜其实算作「医疗器械」的一种,又称「医用冷敷贴」。 …...
2024/5/6 21:42:42 - 械字号医用眼膜缓解用眼过度到底有无作用?
原标题:械字号医用眼膜缓解用眼过度到底有无作用?医用眼膜/械字号眼膜/医用冷敷眼贴 凝胶层为亲水高分子材料,含70%以上的水分。体表皮肤温度传导到本产品的凝胶层,热量被凝胶内水分子吸收,通过水分的蒸发带走大量的热量,可迅速地降低体表皮肤局部温度,减轻局部皮肤的灼…...
2024/5/4 23:54:56 - 配置失败还原请勿关闭计算机,电脑开机屏幕上面显示,配置失败还原更改 请勿关闭计算机 开不了机 这个问题怎么办...
解析如下:1、长按电脑电源键直至关机,然后再按一次电源健重启电脑,按F8健进入安全模式2、安全模式下进入Windows系统桌面后,按住“winR”打开运行窗口,输入“services.msc”打开服务设置3、在服务界面,选中…...
2022/11/19 21:17:18 - 错误使用 reshape要执行 RESHAPE,请勿更改元素数目。
%读入6幅图像(每一幅图像的大小是564*564) 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 - 配置 已完成 请勿关闭计算机,win7系统关机提示“配置Windows Update已完成30%请勿关闭计算机...
win7系统关机提示“配置Windows Update已完成30%请勿关闭计算机”问题的解决方法在win7系统关机时如果有升级系统的或者其他需要会直接进入一个 等待界面,在等待界面中我们需要等待操作结束才能关机,虽然这比较麻烦,但是对系统进行配置和升级…...
2022/11/19 21:17:15 - 台式电脑显示配置100%请勿关闭计算机,“准备配置windows 请勿关闭计算机”的解决方法...
有不少用户在重装Win7系统或更新系统后会遇到“准备配置windows,请勿关闭计算机”的提示,要过很久才能进入系统,有的用户甚至几个小时也无法进入,下面就教大家这个问题的解决方法。第一种方法:我们首先在左下角的“开始…...
2022/11/19 21:17:14 - win7 正在配置 请勿关闭计算机,怎么办Win7开机显示正在配置Windows Update请勿关机...
置信有很多用户都跟小编一样遇到过这样的问题,电脑时发现开机屏幕显现“正在配置Windows Update,请勿关机”(如下图所示),而且还需求等大约5分钟才干进入系统。这是怎样回事呢?一切都是正常操作的,为什么开时机呈现“正…...
2022/11/19 21:17:13 - 准备配置windows 请勿关闭计算机 蓝屏,Win7开机总是出现提示“配置Windows请勿关机”...
Win7系统开机启动时总是出现“配置Windows请勿关机”的提示,没过几秒后电脑自动重启,每次开机都这样无法进入系统,此时碰到这种现象的用户就可以使用以下5种方法解决问题。方法一:开机按下F8,在出现的Windows高级启动选…...
2022/11/19 21:17:12 - 准备windows请勿关闭计算机要多久,windows10系统提示正在准备windows请勿关闭计算机怎么办...
有不少windows10系统用户反映说碰到这样一个情况,就是电脑提示正在准备windows请勿关闭计算机,碰到这样的问题该怎么解决呢,现在小编就给大家分享一下windows10系统提示正在准备windows请勿关闭计算机的具体第一种方法:1、2、依次…...
2022/11/19 21:17:11 - 配置 已完成 请勿关闭计算机,win7系统关机提示“配置Windows Update已完成30%请勿关闭计算机”的解决方法...
今天和大家分享一下win7系统重装了Win7旗舰版系统后,每次关机的时候桌面上都会显示一个“配置Windows Update的界面,提示请勿关闭计算机”,每次停留好几分钟才能正常关机,导致什么情况引起的呢?出现配置Windows Update…...
2022/11/19 21:17:10 - 电脑桌面一直是清理请关闭计算机,windows7一直卡在清理 请勿关闭计算机-win7清理请勿关机,win7配置更新35%不动...
只能是等着,别无他法。说是卡着如果你看硬盘灯应该在读写。如果从 Win 10 无法正常回滚,只能是考虑备份数据后重装系统了。解决来方案一:管理员运行cmd:net stop WuAuServcd %windir%ren SoftwareDistribution SDoldnet start WuA…...
2022/11/19 21:17:09 - 计算机配置更新不起,电脑提示“配置Windows Update请勿关闭计算机”怎么办?
原标题:电脑提示“配置Windows Update请勿关闭计算机”怎么办?win7系统中在开机与关闭的时候总是显示“配置windows update请勿关闭计算机”相信有不少朋友都曾遇到过一次两次还能忍但经常遇到就叫人感到心烦了遇到这种问题怎么办呢?一般的方…...
2022/11/19 21:17:08 - 计算机正在配置无法关机,关机提示 windows7 正在配置windows 请勿关闭计算机 ,然后等了一晚上也没有关掉。现在电脑无法正常关机...
关机提示 windows7 正在配置windows 请勿关闭计算机 ,然后等了一晚上也没有关掉。现在电脑无法正常关机以下文字资料是由(历史新知网www.lishixinzhi.com)小编为大家搜集整理后发布的内容,让我们赶快一起来看一下吧!关机提示 windows7 正在配…...
2022/11/19 21:17:05 - 钉钉提示请勿通过开发者调试模式_钉钉请勿通过开发者调试模式是真的吗好不好用...
钉钉请勿通过开发者调试模式是真的吗好不好用 更新时间:2020-04-20 22:24:19 浏览次数:729次 区域: 南阳 > 卧龙 列举网提醒您:为保障您的权益,请不要提前支付任何费用! 虚拟位置外设器!!轨迹模拟&虚拟位置外设神器 专业用于:钉钉,外勤365,红圈通,企业微信和…...
2022/11/19 21:17:05 - 配置失败还原请勿关闭计算机怎么办,win7系统出现“配置windows update失败 还原更改 请勿关闭计算机”,长时间没反应,无法进入系统的解决方案...
前几天班里有位学生电脑(windows 7系统)出问题了,具体表现是开机时一直停留在“配置windows update失败 还原更改 请勿关闭计算机”这个界面,长时间没反应,无法进入系统。这个问题原来帮其他同学也解决过,网上搜了不少资料&#x…...
2022/11/19 21:17:04 - 一个电脑无法关闭计算机你应该怎么办,电脑显示“清理请勿关闭计算机”怎么办?...
本文为你提供了3个有效解决电脑显示“清理请勿关闭计算机”问题的方法,并在最后教给你1种保护系统安全的好方法,一起来看看!电脑出现“清理请勿关闭计算机”在Windows 7(SP1)和Windows Server 2008 R2 SP1中,添加了1个新功能在“磁…...
2022/11/19 21:17:03 - 请勿关闭计算机还原更改要多久,电脑显示:配置windows更新失败,正在还原更改,请勿关闭计算机怎么办...
许多用户在长期不使用电脑的时候,开启电脑发现电脑显示:配置windows更新失败,正在还原更改,请勿关闭计算机。。.这要怎么办呢?下面小编就带着大家一起看看吧!如果能够正常进入系统,建议您暂时移…...
2022/11/19 21:17:02 - 还原更改请勿关闭计算机 要多久,配置windows update失败 还原更改 请勿关闭计算机,电脑开机后一直显示以...
配置windows update失败 还原更改 请勿关闭计算机,电脑开机后一直显示以以下文字资料是由(历史新知网www.lishixinzhi.com)小编为大家搜集整理后发布的内容,让我们赶快一起来看一下吧!配置windows update失败 还原更改 请勿关闭计算机&#x…...
2022/11/19 21:17:01 - 电脑配置中请勿关闭计算机怎么办,准备配置windows请勿关闭计算机一直显示怎么办【图解】...
不知道大家有没有遇到过这样的一个问题,就是我们的win7系统在关机的时候,总是喜欢显示“准备配置windows,请勿关机”这样的一个页面,没有什么大碍,但是如果一直等着的话就要两个小时甚至更久都关不了机,非常…...
2022/11/19 21:17:00 - 正在准备配置请勿关闭计算机,正在准备配置windows请勿关闭计算机时间长了解决教程...
当电脑出现正在准备配置windows请勿关闭计算机时,一般是您正对windows进行升级,但是这个要是长时间没有反应,我们不能再傻等下去了。可能是电脑出了别的问题了,来看看教程的说法。正在准备配置windows请勿关闭计算机时间长了方法一…...
2022/11/19 21:16:59 - 配置失败还原请勿关闭计算机,配置Windows Update失败,还原更改请勿关闭计算机...
我们使用电脑的过程中有时会遇到这种情况,当我们打开电脑之后,发现一直停留在一个界面:“配置Windows Update失败,还原更改请勿关闭计算机”,等了许久还是无法进入系统。如果我们遇到此类问题应该如何解决呢࿰…...
2022/11/19 21:16:58 - 如何在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