掌握Angular2的依赖注入
我们这一篇文章还是以QuickStart项目为基础,从头开始讲解怎么在Angular2中使用依赖注入,如果你按照本篇文章中讲解的示例亲自走一遍的话,你一定能够掌握如何在Angular2中使用依赖注入.好,废话不多说,开始我们今天的旅行吧!
我们首先将项目中的内联模板替换为一个模板文件,使用templateUrl
替换template
:
@Component({selector: 'my-app',//template: '<h1>My First Angular2 Travel</h1>',templateUrl: 'app/templates/app.html'
})
接下来我们给自己的页面添加一些展示的数据,我们首先新建一个文件app/classes/User.ts
,用来创建我们的User
实例:
export class User{constructor(private name:string,private age:number,private email:string){}
}
然后我们在组件中引入这个类,然后创建我们的显示数据:
import {User} from "./classes/User";
// ...
export class AppComponent {users: User[] = [new User('dreamapple', 22, '2312674832@qq.com'),new User('dreamapplehappy', 18, '2313334832@qq.com')]
}
别忘了在模板中添加一些展示数据使用的html代码:
<h1>依赖注入</h1>
<ul><li *ngFor="let user of users">用户的姓名: {{user.name}}; 用户的年龄: {{user.age}}; 用户的邮箱: {{user.email}}</li>
</ul>
然后我们就会看到,在页面中显示出来了我们想要的那些数据:
Angular2的依赖注入
一般情况下在Web应用中,我们要展示的数据都是从后台服务器动态获取的,所以我们来模拟一下这个过程;我们在这里就要使用服务的依赖注入了,我们首先创建文件user-data.mock.ts
,路径是app/mock/user-data.mock.ts
;
import {User} from "../classes/User";export var Users:User[] = [new User('dreamapple1', 21, '2451731631@qq.com'),new User('dreamapple2', 22, '2451731632@qq.com'),new User('dreamapple3', 23, '2451731633@qq.com'),new User('dreamapple4', 24, '2451731634@qq.com'),new User('dreamapple5', 25, '2451731635@qq.com'),new User('dreamapple6', 26, '2451731636@qq.com')
]
我们使用了User
类来创建我们的数据,然后把创建的数据导出.
接下来我们要创建一个获取用户数据的服务,我们创建一个新的文件user.service.ts
,路径app/services/user.service.ts
:
import {Injectable} from '@angular/core';
import {Users} from "../mock/user-data.mock";@Injectable()
export class UserService {getUsers() {return Users;}
}
大家关于上面的代码部分会有一些疑问,我们来给大家解释一下:首先我们使用了刚才我们创造的模拟数据Users
;然后我们从@angular/core
中导出了Injectable
,就像我们从中导出Component
一样;@Injectable()
标志着一个类可以被一个注入器实例化;通常来讲,在试图实例化
一个没有被标识为@Injectable()
的类时候,注入器将会报告错误.上面的解释现在不明白不要紧,我们先学会如何使用;就像你不懂计算机原理一样可以把计算机玩得很溜一样.
我们接下来要在AppComponent
组件中使用UserService
了,需要注意的地方是:我们要在@Component
的元数据中使用providers
声明我们所需要的依赖,还要引入User
类来帮助我们声明数据的类型.
import {UserService} from "./services/user.service";
import {User} from "./classes/User";
//...
@Component({selector: 'my-app',//template: '<h1>My First Angular2 Travel</h1>',templateUrl: 'app/templates/app.html',providers: [UserService]
})
export class AppComponent {users: User[];constructor(private userService: UserService) {this.users = userService.getUsers();}
}
对上面代码的一些解释:我们使用providers: [UserService]
来声明我们这个组件的依赖,如果没有这个选项,我们的程序会报错;然后我们给这个类添加一个属性users
,同时声明这个属性的类型是一个含有User
类实例的数组;最后我们在构造函数中又声明了一个私有的属性userService
,它是UserService
服务类的一个实例,我们可以用这个实例来获取users
数据.
运行一下,然后我们就会看到下面的页面,表示一切成功.
如果这个时候你试图把user.service.ts
的@Injectable
注释掉的话,整个程序是没有报错的,但是我们建议为每个服务类都添加@Injectable()
,包括那些没有依赖所以技术上不需要它的.因为:(1)面向未来,没有必要记得在后来添加了一个依赖的时候添加@Injectable()
.(2)一致性,所有的服务都遵循同样的规则,并且我们不需要考虑为什么少一个装饰器.
这是因为,我们的UserService
服务现在还没有什么依赖,如果我们给UserService
添加一个依赖的话,如果这时候把@Injectable()
注释掉的话,程序就会报错;我们来试试看吧.
很多Web程序都会需要一个日志服务,所以我们来新建一个服务Logger
,路径如下:app/services/logger.service.ts
:
import {Injectable} from '@angular/core';@Injectable()
export class Logger{logs: string[] = [];log(msg) {this.logs.push(msg);console.warn('From logger class: ' + msg);}
}
然后我们在UserService
服务中使用这个服务:
import {Injectable} from '@angular/core';
import {Users} from "../mock/user-data.mock";
import {Logger} from "./logger.service";@Injectable()
export class UserService {constructor(private logger: Logger) {}getUsers() {this.logger.log('get users');return Users;}
}
可以看到,我们把Logger
当做UserService
服务的一个依赖,因为我们在UserService
类的构造函数中声明了一个logger
属性,它是Logger
类的一个实例;还有别忘了在AppComponent
中添加这个Logger
依赖:
@Component({selector: 'my-app',//template: '<h1>My First Angular2 Travel</h1>',templateUrl: 'app/templates/app.html',providers: [Logger, // 添加Logger依赖UserService]
})
然后我们可以在页面中看到:
如果这个时候,我们注释掉UserService
的@Injectable()
的话,程序就会报错:
所以,就像上面所说的;我们还是给每一个服务类添加@Injectable()
,以免出现不必要的麻烦.
接下来我们来讨论一下在Angular2
中服务的提供商们,如果你对所谓的提供商不理解的话,没关系;可以这样理解,每当我们使用一个服务的时候,Angular2都会通过提供商来创建或者获取我们想要的服务的实例.
我们上面所说的那种提供服务的方式其实是最简单的一种方式,接下来我们讨论注册不同的服务提供商的方法;首先第一种就是我们上面所说的那种了,其实它是一种简写的方式;详细的方式应该是这样的:
[{ provide: Logger, useClass: Logger }]
其中provide
作为键值key
使用,用于定位依赖,用于注册这个提供商;这个其实就是在后面的程序中使用的服务的名字;useClass
表示我们使用哪一个服务类去创建实例,当然我们可以使用不同的服务类,只要这些服务的类满足我们相应的需求就行.
我们可以试着替换Logger
类为BetterLogger
类,我们首先创建BetterLogger
类:
import {Injectable} from '@angular/core';@Injectable()
export class BetterLogger{logs: string[] = [];log(msg) {this.logs.push(msg);console.warn('From better logger class: ' + msg);}
}
然后在AppComponent
中使用这个BetterLogger
类:
@Component({selector: 'my-app',//template: '<h1>My First Angular2 Travel</h1>',templateUrl: 'app/templates/app.html',providers: [//Logger,[{provide: Logger, useClass: BetterLogger}],UserService]
})
我们可以看到,控制台的输出是:
从中可以看到,我们使用了BetterLogger
类替换了Logger
类.如果我们的提供商需要一些依赖,我们应该怎么办呢?不用怕,我们可以使用下面这种形式:
[ LoggerHelper,{ provide: Logger, useClass: Logger }]
接下来我们来创建一个LoggerHelper
类,它的路径是app/services/logger-helper.service.ts
:
import {Injectable} from '@angular/core';@Injectable()
export class LoggerHelper {constructor() {console.warn('Just a logger helper!');}
}
我们在AppComponent
中注册提供商:
@Component({selector: 'my-app',//template: '<h1>My First Angular2 Travel</h1>',templateUrl: 'app/templates/app.html',providers: [//Logger,//[{provide: Logger, useClass: BetterLogger}],[LoggerHelper, {provide: Logger, useClass: BetterLogger}], // 带有依赖的注册商UserService]
})
然后我们在BetterLogger
服务中使用这个依赖:
import {Injectable} from '@angular/core';
import {LoggerHelper} from "./logger-helper.service";@Injectable()
export class BetterLogger{logs: string[] = [];constructor(private loggerHelper: LoggerHelper) {}log(msg) {this.logs.push(msg);console.warn('From better logger class: ' + msg);}
}
然后可以看到我们的控制台的输出结果是:
说明我们正确的使用了依赖;还有我们可以使用别名来使用相同的提供商,这种方式可以解决一些问题;尤其是当我们想让某个老的组件使用一个新的服务,就好比我们想让AppComponent
使用BetterLogger
类来打印日志,而不是使用Logger
类,假如我们不能够改变AppComponent
类,并且我们还想让其他的组件也是用新的BetterLogger
类的话,那么我们就可以像下面这样注册这个提供商
[{ provide: BetterLogger, useClass: BetterLogger}],
[{ provide: Logger, useExisting: BetterLogger}]
看到了吗,我们使用useExisting
而不是useClass
;因为使用useClass
或导致我们的应用中出现两个BetterLogger
类的实例.我们可以试验一下,在AppComponent
中:
@Component({selector: 'my-app',//template: '<h1>My First Angular2 Travel</h1>',templateUrl: 'app/templates/app.html',providers: [//Logger,//[{provide: Logger, useClass: BetterLogger}],[LoggerHelper, {provide: BetterLogger, useClass: BetterLogger}],[LoggerHelper, {provide: Logger, useExisting: BetterLogger}],UserService]
})
然后我们在BetterLogger
类的构造函数中添加一个打印语句:
console.warn('BetterLogger Constructor');
我们还要在UserService
类的构造函数中声明一个属性betterLogger
,它是BetterLogger
类的一个实例:
constructor(private logger: Logger, private betterLogger: BetterLogger) {}
最后我们可以看到控制台的打印结果是:
Just a logger helper!
BetterLogger Constructor
From better logger class: get users
但是一旦我们使用了useClass
而不是useExisting
,那么控制台的打印结果就变成了:
Just a logger helper!
BetterLogger Constructor
BetterLogger Constructor
From better logger class: get users
说明我们创建了两个BetterLogger
的实例.所以当我们的多个服务想使用同一个提供商的时候,我们应该使用useExisting
,而不是useClass
.
[2016-8-20:续写]
值提供商:我们可以使用更简便的方法来注册一个提供商,那就是使用值
,所谓的值可以是任何一种有效的TypeScript
的基本的数据类型.我们来首先使用一个对象
吧.首先我们新创建一个文件logger.value.ts
,路径是app/values/logger.value.ts
;我们写一个基本的loggerValue
对象如下:
let loggerValue = {logs: ['Hello', 'World'],log: (msg) => {console.warn('From values: ' + msg);},hello: () => {console.log('Just say hello!');}
};export {loggerValue};
那我们如何注册这个提供商呢?我们使用useValue
选项来注册我们这种提供商;如下所示:
// ...
providers: [//Logger,//[{provide: Logger, useClass: BetterLogger}],[LoggerHelper, {provide: BetterLogger, useClass: BetterLogger}],//[LoggerHelper, {provide: Logger, useClass: BetterLogger}],{provide: Logger, useValue: loggerValue},//{provide: Logger, useValue: loggerValue1}, // 我们使用了useValue选项UserService]
// ...
还要记住把loggerValue
导入进来;然后我们稍微修改一下user.service.ts
的代码:
// ...
getUsers() {this.logger.log('get users');//noinspection TypeScriptUnresolvedFunctionthis.logger.hello();return Users;}
// ...
然后我们会看到控制台的输出是:
// ...
From values: get users
Just say hello!
// ...
表明我们这种方式注册提供商成功了. 当然我们也可以使用一个字符串了,这些读者可以自行尝试;或者观看这个示例.
工厂提供商:有时我们需要动态创建这个依赖值,因为它所需要的信息我们直到最后一刻才能确定;我们如何注册一个工厂提供商呢?不着急,我们一步一步来:我们首先来创建一个验证权限的文件,authorize.ts
,路径是:app/services/authorize.ts
,我们暂且在里面放置一些简单的逻辑,来判定当前用户有没有获取Users
的权限:
import {Injectable} from '@angular/core';@Injectable()
export class Authorize {isAuthorized: boolean;constructor(){this.isAuthorized = Math.random() > 0.5 ? true: false;}getIsAuthorized() {return this.isAuthorized;}
}
好吧,我承认这样写有点随意,暂时先这样吧;我们的目的是为了告诉大家如何使用工厂提供商,暂时简化权限验证这一块;从上面的代码我们可以大概了解到,这个服务就是为了获取当前用户的权限情况;然后我们来配置我们的UserService2Provider
,为了方便我们暂时直接在app.component.ts
中书写我们的配置:
// ...
let UserService2Provider = (logger: Logger, authorize: Authorize) => {return new UserService2(logger, authorize.getIsAuthorized());
};
// ...
可以看到,我们的UserService2Provider
其实就是一个返回了类的实例的一个函数;我们给这个函数传递了两个参数,分别是Logger
和Authorize
类的实例,然后我们根据这两个实例,创建出了我们新的服务实例;奥,忘了告诉大家,我们还要创建一个新的UserService2
类,路径:app/services/user-service2.ts
:
import {Injectable} from '@angular/core';
import {Users} from "../mock/user-data.mock";
import {Logger} from "./logger.service";@Injectable()
export class UserService2 {isAuthorized: boolean;constructor(private logger: Logger, isAuthorized: boolean) {this.isAuthorized = isAuthorized;}getUsers() {if(this.isAuthorized){this.logger.log('get users');return Users;}else {this.logger.log('not isAuthorized!');return [];}}
}
可以看到这个服务类和UserService
差不多,就是多了一个条件验证,如果当前用户有获取Users
的权限,我们就会返回这些Users
;如果没有,我们就返回一个空数组.接下来就是很重要的一步了,我们需要在app.component.ts
的providers
中使用UserService2Provider
:
// ...
providers: [//Logger,//[{provide: Logger, useClass: BetterLogger}],[LoggerHelper, {provide: BetterLogger, useClass: BetterLogger}],//[LoggerHelper, {provide: Logger, useClass: BetterLogger}],{provide: Logger, useValue: loggerValue},//{provide: Logger, useValue: loggerValue1},UserService,Authorize, // 不可缺少{provide: UserService2,useFactory: UserService2Provider,deps: [Logger, Authorize]}]
// ...
还要记住,要添加Authorize
依赖;我们在app.component.ts
中使用新的服务:
// ...
export class AppComponent {users: User[];constructor(private userService: UserService, private userService2: UserService2) {this.users = userService.getUsers();console.log(this.userService2.getUsers());}
}
刷新浏览器,你会看到有时它会输出:
From values: not isAuthorized!
[]
有时它会输出:
From values: get users
[User, User, User, User, User, User]
那么说明,我们这种方式注册工厂提供商
的方式也成功了.
也许大家会有一些疑问,我们在类的构造函数中使用private userService2: UserService2
怎么就获取了这个服务的一个示例,Angular2
是怎么知道我们要的是UserService2
类,它又是如何获取这个类的实例的呢?在Angular2
中我们通过注射器来进行依赖注入,其实上面的形式只是一种简写;详细一点的写法是这样的:
import {Component, Injector} from '@angular/core';
我们先从Ng2
中获取Injector
注射器,然后使用这个注射器来进行我们所需服务的实例化:
// ...
export class AppComponent {users: User[];private userService2: UserService2;//constructor(private userService: UserService, private userService2: UserService2) {// this.users = userService.getUsers();//// console.log(this.userService2.getUsers());//}constructor(private userService: UserService, private injector: Injector) {this.users = userService.getUsers();this.userService2 = this.injector.get(UserService2);console.log(this.userService2.getUsers());}
}
所以可以看出来,这些繁琐的活我们全部都让injector
去做了,只需要我们提供一些简单的说明,聪明的Ng2
就知道如何进行依赖注入.
非类依赖
我们上面的讲解全部都是把一个类作为一个依赖来进行服务的依赖注入,但是假如我们想要的不是一个类,而是一些值,或者对象;我们应该怎么办?我们先来写出这么一个文件app-config.ts
,路径是:app/config/app-config.ts
:
export interface AppConfig {title: string,apiEndPoint: string
}export const AppConf: AppConfig = {title: 'Dreamapple',apiEndPoint: 'https://hacking-with-angular.github.io/'
};
按照上面的使用值
的方法,我们应该可以这样做:
// ...
{provide: AppConfig, useValue: AppConf}
// ...
constructor(private userService: UserService, private userService2: UserService2, private appConf: AppConfig) {this.users = userService.getUsers();console.log(this.userService2.getUsers());console.log(this.appConf);}
// ...
但是我们这样做却没有达到我们想要的效果;控制台报错:
Error: ReferenceError: AppConfig is not defined(…)
因为接口interface
不能够被当做一个类class
来处理,所以我们需要换一种新的方式,使用OpaqueToken
(不透明的令牌):
// 首先导入 OpaqueToken和Inject
import {Component, Injector, OpaqueToken, Inject} from '@angular/core';
// 引入AppConf,并且使用OpaqueToken
import {AppConf} from "./config/app-config";
let APP_CONFIG = new OpaqueToken('./config/app-config');
// 在providers中进行配置
{provide: APP_CONFIG, useValue: AppConf}
// 在类中使用
constructor(private userService: UserService, private userService2: UserService2, @Inject(APP_CONFIG) appConf: AppConfig) {this.users = userService.getUsers();console.log(this.userService2.getUsers());console.log(appConf);}
对上面的代码的一些解释首先我们使用OpaqueTokean
对象注册依赖的提供商,然后我们在@Inject
的帮助下,我们把这个配置对象注入到需要它的构造函数中,最后我们就可以使用最初的那个对象了.虽然AppConfig
接口在依赖注入过程中没有任何作用,但它为该类中的配置对象提供了强类型信息.
最后我们来讲解一下可选依赖
(Optional),有些服务的依赖也许不是必须的;我们就可以使用@Optional()
来对这些参数做标记;记住,当使用@Optional()
时,如果我们想标记logger
这个服务是可选的;那么如果我们不在组件或父级组件中注册一个logger
的话,注入器会设置该logger
的值为空null
;我们的代码必须要为一个空值做准备.来看一下例子吧,我们在user.service.ts
中做一些改动:
// 导入 Optonal
import {Injectable, Optional} from '@angular/core';
import {Users} from "../mock/user-data.mock";
import {Logger} from "./logger.service";
import {BetterLogger} from "./better-logger.service";@Injectable()
export class UserService {constructor(private logger: Logger,// 使用@Optional标记@Optional()private betterLogger: BetterLogger) {}getUsers() {this.logger.log('get users');//noinspection TypeScriptUnresolvedFunctionthis.logger.hello();// 存在betterLogger时的处理if(this.betterLogger) {this.betterLogger.log('optional');}//console.log(this.logger);return Users;}
}
如若内容造成侵权/违法违规/事实不符,请联系编程学习网邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!
相关文章
- Javascript DI!Angular依赖注入的实现原理
JavaScript中实现DI的原理 在JavaScript中实现DI,看起来难,实际上原理很简单,它的核心技术是Function对象的toString()。我们都知道,对一个函数对象执行toString(),它的返回值是函数的源码,知道了这一点&am…...
2024/4/21 4:56:49 - Angular开发必备插件一览表
1. Angular-cli 初始化,开发,构建和维护Angular应用程序的命令行界面工具。 安装 npm install -g angular/cli 命令列表 ng help ng new my-first-project cd my-first-project ng serve 多模块创建 默认创建单模块 创建多模块 ng new my-workspa…...
2024/4/20 19:39:44 - angular开发的IDE环境搭建
试了两种,Visual Studio 2015 和 Visual Studio Code,遇到问题记录下,以备之后忘记了,有据可查1.Visual Studio 2015搭建参照下文,但最后我卡在了编译上,编译运行卡死,发现不能加载app下的.ts文…...
2024/4/20 19:39:43 - 几款移动跨平台App开发框架比较
海豚精灵:https://www.whhtjl.com;优课GO:https://mgo.whhtjl.com 整理目前流行的跨平台WebApp开发技术的特点,仅供参考。 每个框架几乎都包含以下特性: 使用 HTML5 CSS JavaScript 开发;跨平台重用代…...
2024/4/20 19:39:42 - 02 ionic+angular开发webapp笔记
Angular js 的特性: MVC 模块化和依赖注入 双向数据绑定 指令和ui控件 MVC全名是Model View Controller,是模型(model)-视图(view)-控制器(controller)的缩写,一种软件设计典范,用一种业务逻辑、数据、…...
2024/4/20 19:39:41 - Angular8 开发(二)
前面已经说到了基本的集成可开发准备工作,Angular 开发(一)。接下来开始逻辑部分的编写 目录大纲段子列表获取,路由跳转详情获取段子详情音乐列表搜渲染搜索的音乐列表和播放音乐总结段子列表获取,路由跳转详情 新建段…...
2024/4/21 4:56:48 - angular 开发项目
pc端 angular 5 浏览器支持 IE10 google浏览器 火狐浏览器 移动端 angular5 Ionic3 什么是混合开发? 简单来说,就是在开发移动应用中同时使用Native和Web的开发方式。 什么是Ionic3框架? Ionic3框架是一个混合开发框架,其本身…...
2024/4/26 11:51:09 - JAVAWeb对ajax中get与post的使用
JAVAWeb对ajax中get与post的使用 01.使用背景及ajax的介绍 02.ajax的一些属性 03.使用案例 03.1.基本介绍 03.2.代码详解 03.3.代码运行结果04.总结JAVAWeb对ajax中get与post的使用01.使用背景及ajax的介绍在进行javaWeb的开发中难免会遇到异步请求的情况,为了使网站局部的信息…...
2024/4/21 4:56:47 - angular开发快捷操作
创建项目 ng new my-app快速创建新组件: ng generate component views/user创建service ng g service services/my-service如果缺少依赖rxjs npm install rxjs-compat //需重启生效快速自定义管道文件(pipe) ng g p sexReform...
2024/4/21 4:56:46 - 十款移动APP开发框架
十款移动APP开发框架: 1.jquery mobile框架 2.bootstrap框架 3.ionic框架 4.Mobile Angular UI框架 5.Intel XDK框架 6.Appcelerator Titanium框架 7.Sencha Touch框架 8.Kendo UI框架 9.PhoneGap框架 10.mui框架 1.jquery mobile框架 jQuery Mobile是jQuery 在手机上和平板设备…...
2024/4/21 4:56:44 - AngularJS事件
一.事件 1.ng-click 指令允许当一个元素被点击后执行指定的表达式。 <input type"button" value"add-count" ng-click"countcount1" ng-init"count0;" />{{count}} //鼠标单击事件,不用多说 2.ng-dblclick ng-db…...
2024/4/21 4:56:43 - ag-grid 学习笔记五:ag-grid事件(onRowClicked行点击事件、onCellClicked单击单元格事件、onCellDoubleClicked双击单元格事件、全部事件列表)
一 onRowClicked行点击事件 此事件发生在点击表格行的时候,事件写在gridOptions下。 onRowClicked: function (event) {//event.data 选中的行内数据,event.event 为鼠标事件,等其他。可以log自己看一下console.log(a row was clicked, event…...
2024/5/2 19:27:07 - handsontable 事件汇总
Hook插件afterChange (changes: Array, source: String):1个或多个单元格的值被改变后调用 changes:是一个2维数组包含row,prop,oldVal,newVal4个属性。 source:其值为一个字符串,值可以为&…...
2024/4/25 12:12:19 - SE5004L-R 功率检测器的5 GHz,26dBm功率放大器
具有功率检测器的5 GHz,26dBm功率放大器 产品描述 SE5004L是一款5GHz功率放大器,功率很高无线LAN应用的线性电源。 该SE5004L采用功率检测器封闭循环监测和控制输出功率。 SE5004L提供高度集成的简化设计,提供更快的上市时间和更高的时间应用板产量。 装置整合输入匹配,阶段…...
2024/4/21 4:56:40 - Angular6 实现拖拽功能指令 drag
1. 指令代码 import { Directive, ElementRef, OnInit, HostListener } from angular/core;Directive({selector: [appDrag] }) export class DragDirective implements OnInit {constructor(public el: ElementRef) {}public isDown false;public disX; // 记录鼠标点击事件…...
2024/4/21 4:56:39 - AngularJs可拖拽排序列表
angular-sortable-view 是一款很好用的angularJs可拖拽列表排序插件,使用也非常简单,其内部封装了几个指令,直接注入模块,调用指令即可实现功能。 使用说明: sv-root 根据名字也能大概猜出功能,主要是定义…...
2024/4/21 4:56:38 - Angular splitter 可以拖拽的布局
Angular原生的拖拽布局,无其他依赖。 demo http://angular-splitter.guguji5.top 依赖 angular 5-6angular-cli 如何启动 github仓库:https://github.com/guguji5/angular-splitter git clone https://github.com/guguji5/angular-splitter.git c…...
2024/4/21 4:56:37 - (Angular+ TS) Echarts Graph 关系图节点拖拽不反弹+自定义按钮实现缩放
前提: 1. 需要在module中引入NgxEchartsModule 2. ts文件中引入所需文件: import { Component, OnInit, NgZone } from angular/core; import { of } from rxjs; import * as echarts from echarts; const echart echarts as any; 代码࿱…...
2024/4/21 4:56:36 - angular 动态合并单元格
[attr.colspan] <tr style"font-size: 12px;"><th rowspan"1" style"width: 80px;background-color: white;">名称</th><ng-container *ngFor"let item of lotOfWork.columnNameList; let i index"><th […...
2024/5/3 14:53:25 - Angular入门到精通系列教程(1) - Angular,Vue,React 选型
1. 概述 总的来说一句话,如果你是老大,你可以选择用什么;如果你不是,那么,老大让用什么,你就用什么。 前端框架Angular,Vue,React三选一,没有第四种。 (当然,如果只是一…...
2024/5/3 5:33:59
最新文章
- vue3 + ts 快速入门(全)
文章目录 学习链接1. Vue3简介1.1. 性能的提升1.2.源码的升级1.3. 拥抱TypeScript1.4. 新的特性 2. 创建Vue3工程2.1. 基于 vue-cli 创建2.2. 基于 vite 创建(推荐)vite介绍创建步骤项目结构安装插件项目结构总结 2.3. 一个简单的效果Person.vueApp.vue …...
2024/5/4 13:00:02 - 梯度消失和梯度爆炸的一些处理方法
在这里是记录一下梯度消失或梯度爆炸的一些处理技巧。全当学习总结了如有错误还请留言,在此感激不尽。 权重和梯度的更新公式如下: w w − η ⋅ ∇ w w w - \eta \cdot \nabla w ww−η⋅∇w 个人通俗的理解梯度消失就是网络模型在反向求导的时候出…...
2024/3/20 10:50:27 - OpenHarmony开发-连接开发板调试应用
在 OpenHarmony 开发过程中,连接开发板进行应用调试是一个关键步骤,只有在真实的硬件环境下,我们才能测试出应用更多的潜在问题,以便后续我们进行优化。本文详细介绍了连接开发板调试 OpenHarmony 应用的操作步骤。 首先…...
2024/5/3 10:28:22 - 【Easy云盘 | 第十三篇】分享模块(获取目录信息、获取文件信息、创建下载链接)
文章目录 4.4.7获取目录信息4.4.8获取文件信息4.4.9创建下载链接 4.4.7获取目录信息 明天做 4.4.8获取文件信息 明天做 4.4.9创建下载链接 明天做...
2024/5/4 7:34:33 - 【外汇早评】美通胀数据走低,美元调整
原标题:【外汇早评】美通胀数据走低,美元调整昨日美国方面公布了新一期的核心PCE物价指数数据,同比增长1.6%,低于前值和预期值的1.7%,距离美联储的通胀目标2%继续走低,通胀压力较低,且此前美国一季度GDP初值中的消费部分下滑明显,因此市场对美联储后续更可能降息的政策…...
2024/5/1 17:30:59 - 【原油贵金属周评】原油多头拥挤,价格调整
原标题:【原油贵金属周评】原油多头拥挤,价格调整本周国际劳动节,我们喜迎四天假期,但是整个金融市场确实流动性充沛,大事频发,各个商品波动剧烈。美国方面,在本周四凌晨公布5月份的利率决议和新闻发布会,维持联邦基金利率在2.25%-2.50%不变,符合市场预期。同时美联储…...
2024/5/2 16:16:39 - 【外汇周评】靓丽非农不及疲软通胀影响
原标题:【外汇周评】靓丽非农不及疲软通胀影响在刚结束的周五,美国方面公布了新一期的非农就业数据,大幅好于前值和预期,新增就业重新回到20万以上。具体数据: 美国4月非农就业人口变动 26.3万人,预期 19万人,前值 19.6万人。 美国4月失业率 3.6%,预期 3.8%,前值 3…...
2024/4/29 2:29:43 - 【原油贵金属早评】库存继续增加,油价收跌
原标题:【原油贵金属早评】库存继续增加,油价收跌周三清晨公布美国当周API原油库存数据,上周原油库存增加281万桶至4.692亿桶,增幅超过预期的74.4万桶。且有消息人士称,沙特阿美据悉将于6月向亚洲炼油厂额外出售更多原油,印度炼油商预计将每日获得至多20万桶的额外原油供…...
2024/5/3 23:10:03 - 【外汇早评】日本央行会议纪要不改日元强势
原标题:【外汇早评】日本央行会议纪要不改日元强势近两日日元大幅走强与近期市场风险情绪上升,避险资金回流日元有关,也与前一段时间的美日贸易谈判给日本缓冲期,日本方面对汇率问题也避免继续贬值有关。虽然今日早间日本央行公布的利率会议纪要仍然是支持宽松政策,但这符…...
2024/4/27 17:58:04 - 【原油贵金属早评】欧佩克稳定市场,填补伊朗问题的影响
原标题:【原油贵金属早评】欧佩克稳定市场,填补伊朗问题的影响近日伊朗局势升温,导致市场担忧影响原油供给,油价试图反弹。此时OPEC表态稳定市场。据消息人士透露,沙特6月石油出口料将低于700万桶/日,沙特已经收到石油消费国提出的6月份扩大出口的“适度要求”,沙特将满…...
2024/4/27 14:22:49 - 【外汇早评】美欲与伊朗重谈协议
原标题:【外汇早评】美欲与伊朗重谈协议美国对伊朗的制裁遭到伊朗的抗议,昨日伊朗方面提出将部分退出伊核协议。而此行为又遭到欧洲方面对伊朗的谴责和警告,伊朗外长昨日回应称,欧洲国家履行它们的义务,伊核协议就能保证存续。据传闻伊朗的导弹已经对准了以色列和美国的航…...
2024/4/28 1:28:33 - 【原油贵金属早评】波动率飙升,市场情绪动荡
原标题:【原油贵金属早评】波动率飙升,市场情绪动荡因中美贸易谈判不安情绪影响,金融市场各资产品种出现明显的波动。随着美国与中方开启第十一轮谈判之际,美国按照既定计划向中国2000亿商品征收25%的关税,市场情绪有所平复,已经开始接受这一事实。虽然波动率-恐慌指数VI…...
2024/4/30 9:43:09 - 【原油贵金属周评】伊朗局势升温,黄金多头跃跃欲试
原标题:【原油贵金属周评】伊朗局势升温,黄金多头跃跃欲试美国和伊朗的局势继续升温,市场风险情绪上升,避险黄金有向上突破阻力的迹象。原油方面稍显平稳,近期美国和OPEC加大供给及市场需求回落的影响,伊朗局势并未推升油价走强。近期中美贸易谈判摩擦再度升级,美国对中…...
2024/4/27 17:59:30 - 【原油贵金属早评】市场情绪继续恶化,黄金上破
原标题:【原油贵金属早评】市场情绪继续恶化,黄金上破周初中国针对于美国加征关税的进行的反制措施引发市场情绪的大幅波动,人民币汇率出现大幅的贬值动能,金融市场受到非常明显的冲击。尤其是波动率起来之后,对于股市的表现尤其不安。隔夜美国股市出现明显的下行走势,这…...
2024/5/2 15:04:34 - 【外汇早评】美伊僵持,风险情绪继续升温
原标题:【外汇早评】美伊僵持,风险情绪继续升温昨日沙特两艘油轮再次发生爆炸事件,导致波斯湾局势进一步恶化,市场担忧美伊可能会出现摩擦生火,避险品种获得支撑,黄金和日元大幅走强。美指受中美贸易问题影响而在低位震荡。继5月12日,四艘商船在阿联酋领海附近的阿曼湾、…...
2024/4/28 1:34:08 - 【原油贵金属早评】贸易冲突导致需求低迷,油价弱势
原标题:【原油贵金属早评】贸易冲突导致需求低迷,油价弱势近日虽然伊朗局势升温,中东地区几起油船被袭击事件影响,但油价并未走高,而是出于调整结构中。由于市场预期局势失控的可能性较低,而中美贸易问题导致的全球经济衰退风险更大,需求会持续低迷,因此油价调整压力较…...
2024/4/26 19:03:37 - 氧生福地 玩美北湖(上)——为时光守候两千年
原标题:氧生福地 玩美北湖(上)——为时光守候两千年一次说走就走的旅行,只有一张高铁票的距离~ 所以,湖南郴州,我来了~ 从广州南站出发,一个半小时就到达郴州西站了。在动车上,同时改票的南风兄和我居然被分到了一个车厢,所以一路非常愉快地聊了过来。 挺好,最起…...
2024/4/29 20:46:55 - 氧生福地 玩美北湖(中)——永春梯田里的美与鲜
原标题:氧生福地 玩美北湖(中)——永春梯田里的美与鲜一觉醒来,因为大家太爱“美”照,在柳毅山庄去寻找龙女而错过了早餐时间。近十点,向导坏坏还是带着饥肠辘辘的我们去吃郴州最富有盛名的“鱼头粉”。说这是“十二分推荐”,到郴州必吃的美食之一。 哇塞!那个味美香甜…...
2024/4/30 22:21:04 - 氧生福地 玩美北湖(下)——奔跑吧骚年!
原标题:氧生福地 玩美北湖(下)——奔跑吧骚年!让我们红尘做伴 活得潇潇洒洒 策马奔腾共享人世繁华 对酒当歌唱出心中喜悦 轰轰烈烈把握青春年华 让我们红尘做伴 活得潇潇洒洒 策马奔腾共享人世繁华 对酒当歌唱出心中喜悦 轰轰烈烈把握青春年华 啊……啊……啊 两…...
2024/5/1 4:32:01 - 扒开伪装医用面膜,翻六倍价格宰客,小姐姐注意了!
原标题:扒开伪装医用面膜,翻六倍价格宰客,小姐姐注意了!扒开伪装医用面膜,翻六倍价格宰客!当行业里的某一品项火爆了,就会有很多商家蹭热度,装逼忽悠,最近火爆朋友圈的医用面膜,被沾上了污点,到底怎么回事呢? “比普通面膜安全、效果好!痘痘、痘印、敏感肌都能用…...
2024/5/4 2:59:34 - 「发现」铁皮石斛仙草之神奇功效用于医用面膜
原标题:「发现」铁皮石斛仙草之神奇功效用于医用面膜丽彦妆铁皮石斛医用面膜|石斛多糖无菌修护补水贴19大优势: 1、铁皮石斛:自唐宋以来,一直被列为皇室贡品,铁皮石斛生于海拔1600米的悬崖峭壁之上,繁殖力差,产量极低,所以古代仅供皇室、贵族享用 2、铁皮石斛自古民间…...
2024/4/28 5:48:52 - 丽彦妆\医用面膜\冷敷贴轻奢医学护肤引导者
原标题:丽彦妆\医用面膜\冷敷贴轻奢医学护肤引导者【公司简介】 广州华彬企业隶属香港华彬集团有限公司,专注美业21年,其旗下品牌: 「圣茵美」私密荷尔蒙抗衰,产后修复 「圣仪轩」私密荷尔蒙抗衰,产后修复 「花茵莳」私密荷尔蒙抗衰,产后修复 「丽彦妆」专注医学护…...
2024/4/30 9:42:22 - 广州械字号面膜生产厂家OEM/ODM4项须知!
原标题:广州械字号面膜生产厂家OEM/ODM4项须知!广州械字号面膜生产厂家OEM/ODM流程及注意事项解读: 械字号医用面膜,其实在我国并没有严格的定义,通常我们说的医美面膜指的应该是一种「医用敷料」,也就是说,医用面膜其实算作「医疗器械」的一种,又称「医用冷敷贴」。 …...
2024/5/2 9:07:46 - 械字号医用眼膜缓解用眼过度到底有无作用?
原标题:械字号医用眼膜缓解用眼过度到底有无作用?医用眼膜/械字号眼膜/医用冷敷眼贴 凝胶层为亲水高分子材料,含70%以上的水分。体表皮肤温度传导到本产品的凝胶层,热量被凝胶内水分子吸收,通过水分的蒸发带走大量的热量,可迅速地降低体表皮肤局部温度,减轻局部皮肤的灼…...
2024/4/30 9:42:49 - 配置失败还原请勿关闭计算机,电脑开机屏幕上面显示,配置失败还原更改 请勿关闭计算机 开不了机 这个问题怎么办...
解析如下: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