angular2/4
米斯特尔曾
在前端这条道上越走越模糊了
展开
-
angular中forRoot&forChild的作用
angular中forRoot&forChild的作用用法import { NgModule, ModuleWithProviders } from '@angular/core';import { CommonModule } from '@angular/common';@NgModule({ declarations: [], imports: [ CommonModule ]})export class ChildModule { static forCh原创 2020-07-02 11:22:22 · 2307 阅读 · 0 评论 -
angular 在模板中申明临时变量(指令实现)
指令代码import { Directive, ViewContainerRef, TemplateRef, Input } from '@angular/core';@Directive({ selector: '[let]'})export class ExpAsDirective { _context: any = {}; @Input() public set letContext(val) { this._context = val; this._update原创 2020-05-11 15:15:46 · 767 阅读 · 0 评论 -
angular 代理http到https
{ "/api": { "target": "https://www.XXXX.com", "changeOrigin": true }, "/public": { "target": "https://www.XXXX.com", "changeOrigin": true }}原创 2020-03-30 14:48:29 · 1792 阅读 · 1 评论 -
storybook for angular
storybook for angular 初试安装依赖 @storybook/clizengwe$ npm i -g @storybook/cli在angular项目下运行zengwe$ getstorybook 初始化成功后会在项目下增加连个文件夹./.storybook./src/stories在stories下会有storybook的demo示例import { a...原创 2020-02-29 16:23:02 · 521 阅读 · 0 评论 -
angular ng-template
解释其实和html5的template是一样的就是将模板保存到html中然后需要时再抓出来显示到指定位置代码import { Component, ViewChild, TemplateRef,ViewContainerRef } from '@angular/core';@Component({ selector: 'app-root', // templateUrl: './...原创 2018-12-19 22:00:05 · 3644 阅读 · 1 评论 -
angular library application 开发
前言从angular6开始已经有library和project的开发命令applicationapplication的相关命令zengwe@zengwe-PC:ng-testing$ng generate application --helpGenerates and/or modifies files based on a schematic.usage: ng generate a...原创 2018-12-04 23:03:38 · 1556 阅读 · 0 评论 -
angular 依赖注入3---作用范围
依赖注入作用范围依赖注入可以来模块中注入,也可以在component中注入,两者可见范围还是有很大区别的具体可见范围提供器的作用域原则在模块中provider时对所有组件是可见的,所有组件都可以注入。在组件中provider时,只对他声明的组件和子组件可见,其他组件不可注入。在子模块中provider时,然后在组件中使用时依然使用的最先provider的那个实例。...原创 2018-11-01 10:14:21 · 303 阅读 · 0 评论 -
angular directive 实现自定义事件
directive通过directive可以获取到dom节点,并且可以在基础事件之上分装自定义的一些事件###例子host-listen.directive.tsimport { Directive, Output, EventEmitter, OnInit, Renderer, Renderer2, ElementRef } from '@angular/core';@Directi...原创 2018-10-22 14:23:12 · 2550 阅读 · 0 评论 -
angular toPromise 报错
angular6中import ‘rxjs/add/operator/toPromise’;报错 解决办法来源于stackoverflow 就是说rxjs 5.5.0-beta.5+中已经自动添加了toPromise方法不用再额外引入,并且不用Http了用HttpClientimport { BrowserModule } from '@angular/platform-brows...原创 2018-08-01 16:42:44 · 3363 阅读 · 0 评论 -
angular ng-template 灵活运用
用处可以随意调整组件显示的位置,个人觉得在嵌套组件中最方便举例app.component.tsimport { Component, ViewChild, TemplateRef,ViewContainerRef } from '@angular/core';@Component({ selector: 'app-root', styleUrls: ['./app.compone...原创 2018-12-19 22:28:55 · 6117 阅读 · 0 评论 -
angular library 打包 多入口
构建自己的私有library太零散希望达到想@angular那样将相同种类的包放到一个文件夹下如:zengwe:boundary$ ll node_modules/@angular总用量 48drwxrwxrwx 1 zengwe zengwe 4096 Dec 6 17:35 animationsdrwxrwxrwx 1 zengwe zengwe 4096 Dec 6 17:3...原创 2019-01-09 11:01:42 · 1521 阅读 · 0 评论 -
解决angular依赖注入的弱依赖实现解耦
解决angular依赖注入的弱依赖实现解耦在angular的官方hero的demo中依赖注入的使用为import { Component } from '@angular/core';import { ProjectService } from './services/project.service';@Component({ selector: 'app-root', templ...原创 2019-01-09 11:40:45 · 1545 阅读 · 2 评论 -
Angular报错: Error encountered in metadata generated for exported symbol
错误信息Error encountered in metadata generated for exported symbol 'Calculate';Metadata collected contains an error that will be reported at runtime: Only initialized variables and constants can be ref...原创 2019-02-20 14:17:17 · 1034 阅读 · 1 评论 -
Angular 自定义组件实现 ngModel
自定义组件需要实现数据双向绑定angular中ControlValueAccessor实现model->view,view->model,从而实现的双向绑定自定义组件需要双向绑定即实现ControlValueAccessor的接口即可代码app.componentimport { Component, OnInit, Input, forwardRef, ViewChild ...原创 2019-03-07 19:52:12 · 5606 阅读 · 2 评论 -
angular 实现 自定义类似ngModel的双向绑定
前言在angular中[(ngModel)]等价于[ngModel]&(ngModelChange),所以自定义的双向绑定实现同样的两个功能即可代码two-way.component.tsimport { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';@Component({ se...原创 2019-03-17 18:58:34 · 1154 阅读 · 1 评论 -
angular 报错 JavaScript heap out of memory
JavaScript heap out of memory原因是angular内存溢出解决办法node --max_old_space_size=8048 ./node_modules/@angular/cli/bin/ng serve原创 2019-05-05 15:07:28 · 1457 阅读 · 0 评论 -
angular 测试 ng test出错@angular-devkitild-angular
错误信息zengwe$ ng testYour global Angular CLI version (7.3.8) is greater than your localversion (6.1.0). The local Angular CLI version is used.To disable this warning use "ng config -g cli.warning...原创 2019-08-06 15:12:06 · 1025 阅读 · 0 评论 -
angular 依赖注入5-injectionToken
使用场景一般情况在{ provide: ‘ServiceName’,…}都尽量使用injectionToken这样可以避免与引入的其他包发生名字的一样而产生冲突的问题使用方法import { ReflectiveInjector } from '@angular/core';var FactorServiceToken= new InjectionToken<strin...原创 2018-07-07 11:30:45 · 2166 阅读 · 0 评论 -
angular 依赖注入4---ValueProvider
用途有时候注入的不一定需要一个类也许只是一个值的时候可以使用这个来注入用法 { provide: 'FactorService', useValue: { data: 'useValue show real value!'} }...原创 2018-07-07 11:16:34 · 510 阅读 · 0 评论 -
angular 依赖注入3---useFactory
创建servicefactor.service.tsimport { Injectable } from '@angular/core';@Injectable({ providedIn: 'root'})export class FactorService { data = 'FactorService real value'; constructor() { }...原创 2018-07-07 11:03:07 · 1679 阅读 · 0 评论 -
angular学习总结二——数据&事件绑定(ngIf、ngFor、ngSwitch、ngModel)
keywordsngIf、ngFor、ngSwatch、ngModule、click、mouseover、mouseleave、ngStyle、ngClass原创 2017-08-14 20:54:21 · 3086 阅读 · 2 评论 -
angular学习总结三——组件的编写
angular2组件间通讯、angular2父组件传递数据到子组件、父组件获取子组件实例、子组件与父组件通讯涉及:@Input、@Output、@viewChild原创 2017-08-15 22:48:00 · 533 阅读 · 0 评论 -
angular学习总结五——发起post、get请求
angular2,angular4 发起http请求原创 2017-09-05 16:07:38 · 1292 阅读 · 0 评论 -
angular学习总结四——路由的用法
angular2,angular4中路由的用法,RouteModule、Routes原创 2017-09-04 22:56:17 · 469 阅读 · 0 评论 -
angular学习总结六——管道的用法
angular2,angular4,管道用法,管道多参数原创 2017-09-05 16:31:28 · 830 阅读 · 0 评论 -
angular学习总结七——http代理解决本地开发时跨域问题
在angular项目的根目录下新建文件proxy.config.json{ "/api": { "target": "http://localhost:8000", "secure":false }}说明/api 是指代理的路由的开头那段比如 /api/login /api/userlist/detail用法启动时 ng serve –proxy原创 2017-10-19 21:52:56 · 1191 阅读 · 0 评论 -
angular学习总结八-请求service封装
angular http get post 请求封装原创 2017-10-19 22:07:49 · 693 阅读 · 0 评论 -
angular学习总结十一——动态创建组件并实现交互二
动态组件上一篇写的是动态创建组件,模板动态原创 2017-10-28 22:07:42 · 814 阅读 · 0 评论 -
angular学习总结九——父组件与子组件数据的双向绑定
父子组件双向绑定,input输入框值变化检测实现效果子组件值变化时父组件也变原创 2017-10-23 22:46:29 · 2319 阅读 · 0 评论 -
angular学习总结十——动态创建组件并实现交互一
angular2、angular4动态组件,Input,Output原创 2017-10-24 23:09:41 · 3722 阅读 · 5 评论 -
angular 依赖注入1---基础
文件结构及文件文件结构app:.│ app.component.css│ app.component.html│ app.component.spec.ts│ app.component.ts│ app.module.ts│├─first│ first.component.css│ first.component.html│ ...原创 2018-07-01 16:04:50 · 365 阅读 · 0 评论 -
angular 依赖注入2---useClass
文件real.service.tsimport { Injectable } from '@angular/core';@Injectable()export class RealService { data = { name: 'real service' } constructor() { } changeData(value: string= 'ch...原创 2018-07-01 22:01:00 · 1542 阅读 · 0 评论 -
vs code 调试angular
需要的插件Debugger for Chrome配置点击左边的那个蜘蛛,添加一个调试配置文件,内容{ // 使用 IntelliSense 了解相关属性。 // 悬停以查看现有属性的描述。 // 欲了解更多信息,请访问: https://go.microsoft.com/fwlink/?linkid=830387 "version": "0.2...原创 2018-07-01 22:10:05 · 532 阅读 · 0 评论 -
angular 测试1-前言(可以单独测试一个文件)
angular test看一下有哪些命令PS G:\code\angulardemo\src\app\services> ng test -husage: ng test <project> [options]options: --browsers Override which browsers tests are run against. --c...原创 2018-07-16 23:09:59 · 1613 阅读 · 0 评论 -
angular 测试2-service
测试服务测试服务是最简单的 ,下面这个例子包含了基本的测试方法和异步测试方法import { TestBed, inject } from '@angular/core/testing';import { InjectServiceService } from './inject-service.service';fdescribe('InjectServiceService', ...原创 2018-07-16 23:20:05 · 516 阅读 · 0 评论 -
angular学习总结一——安装
angular开发环境搭建原创 2017-08-13 17:58:43 · 1888 阅读 · 0 评论