oneloser-CSDN博客

原创 Angular父组件接收@Output数据的两种方式

1、子组件的代码// child.component.tsimport { Component, OnInit, Output, EventEmitter } from '@angular/core';@Component({ selector: 'app-child', templateUrl: './child.component.html', styleUrls: ['./child.component.styl']})export class ChildComponent

2020-06-01 23:32:14 489

原创 Angular使用@Input接收父组件数据的两种方式

1、父组件的代码// parent.component.tsimport { Component, OnInit } from '@angular/core';@Component({ selector: 'app-parent', templateUrl: './parent.component.html', styleUrls: ['./parent.component.styl']})export class ParentComponent implements OnIni

2020-05-27 22:58:50 469

原创 Angular自定义模板驱动表单验证指令

1、创建指令// 以下命令会创建AccountValidatorDirective指令并自动添加到AppModuleng g directive validator/accountValidator2、相关代码// app.component.html<form name="loginForm" #loginForm="ngForm" (ngSubmit)="onSubmit(loginForm.value)"> <div> <p>

2020-05-13 23:35:59 414

原创 Angular自定义键盘事件节流指令

1、创建指令// 以下命令会创建DebounceDirective指令并自动添加到AppModuleng g directive directive/debounce2、相关代码// app.component.html<input appDebounce [debounceTime]='2000' (debounceKeyup)="testDebounceKeyup($event)" />// app.component.tsimport { Component } from

2020-05-13 23:18:32 518

原创 Angular自定义指令示例

1、涉及装饰器下面例子中主要用到了@HostBinding()和@HostListener()两个装饰器，具体作用通过运行下面例子就可以明白。2、创建指令// 以下命令会创建TestDirective指令并自动添加到AppModuleng g directive directive/test3、TestDirective代码import { Directive, HostBindin...

2020-04-27 22:14:55 417

原创 Angular多路由出口配置

1、app-routing.module.ts的代码import { NgModule } from '@angular/core';import { Routes, RouterModule } from '@angular/router';import { Test00Component } from './component/test00/test00.component';imp...

2020-04-27 21:27:43 1022

原创 Angular cli8使用swiper图片轮播插件实例

1、使用npm安装swiper：npm install swipernpm install @types/swiper2、在angular.json中添加：// 在build节点中添加css和js"styles": [ "./node_modules/swiper/css/swiper.min.css"],"scripts": [ "./node_modules/s...

2020-01-05 16:18:13 1418 1

原创暴力实现bootstrap4模态框宽度自适应

主要是修改源代码bootstrap.min.css中.madol-dialog的display和max-width属性：display: table;max-width: auto;

2019-11-03 21:09:47 1561

原创查找字符串中出现次数最多的字符

const text = 'abcddefghiijkmnopqrs';function queryMostLetter(text) { const array1 = Array.from(text); const tempes = {}; for (let i = 0, l = array1.length; i < l; i++) { if (t...

2019-11-03 20:57:21 319

原创 WIN10配置Java环境变量

1. 下载安装jdk13，例如：// Java安装目录E:\Java\jdk-132. cmd进入安装目录，执行：bin\jlink.exe --module-path jmods --add-modules java.desktop --output jre3. 系统变量中，新建Java环境变量：// 变量名称JAVA_HOME// 变量的值E:\Java\jdk-13...

2019-10-23 22:26:56 169

原创 Angular cli8过滤树形结构数据并保留树形结构

1、适用场景实际开发中经常会遇到需要对三级甚至是无限级树型结构进行过滤并且过滤之后仍要保留树形结构的情况，此时采用递归的方式可以满足要求，不但可以完成过滤需求并保留树形结构。2、核心思想如果当前节点包含过滤条件据并且没有子节点则直接保留该节点；如果当前节点不包含过滤条件并且没有子节点则直接不保留该节点；如果当前节点有子节点不管当前节点是否包含过滤条件都对当前节点的子节点进行递归过滤。3、具...

2019-08-18 17:21:56 832

原创 angular cli8利用组件递归实现无限级树型结构

应用场景实际开发中经常会遇到需要构造超过三级甚至是无限级树型结构的情况，如果采用逐级拼装的方法将会十分麻烦并且工作量陡增，此时采用递归的方式将会大大简化代码结构并且收到轻巧灵便的效果；在angular中主要是通过组件递归来实现。核心思想1、在父组件的元素上绑定需要递归的数据和递归组件的选择器：// treeDataes为需要递归的数据// recursive-root为递归组件的选择器...

2019-06-15 14:53:23 1817 4

原创 angular cli8父组件调用子组件中的方法

angular cli8父组件调用子组件的方法1、首先在父组件中引入ViewChild：import { Component, ViewChild} from '@angular/core';2、接着在父组件中引入子组件：import { ChildComponent } from './child/child.component';3、在父组件通过@ViewChild关联子组件并调...

2019-06-09 13:51:57 6531

原创 Javaweb+Angular项目避免打包后找不到静态资源文件的措施

Javaweb+Angular项目避免打包后找不到静态资源文件的措施1、前端创建的angular项目的名称应该和后端创建的java项目的名称保持一致；2、package.json中的build需要通过–base-href来指定静态资源的路径，具体如下："build": "ng build --base-href ./", //开发环境"build:prod": "ng build --pr...

2019-06-02 18:02:47 2550

原创单页面判断页面是不是刷新（谷歌浏览器）

1、场景描述:第一次向后端发起请求得到数据后存储到sessionstorage或localstorage之中，之后的逻辑是每次需要数据时从sessionstorage或localstorage中去取，取不到的时候（比如关闭页面重新打开或者手动清除缓存）再重新向后端发起请求获取数据。但是这样会存在一个问题，即希望通过刷新页面向后端重新发起请求的时候因为sessionstorage或localsto...

2019-05-27 23:50:03 1047

原创 Idea2019创建Spingboot Web项目

Idea2019创建Spingboot Web项目1、Idea及Java版本：2、File > Peoject3、Spring Initializr：4、之后会自动下载需要的相关文件5、src > main > com.xxx.xxx下创建HelloController，内容如下：6、运行XxxApplication，在浏览器窗口输入http://localhost:8080/h...

2019-05-26 13:16:47 2411

oneloser的博客