angular
oneloser
将人生置之度外。
展开
-
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 · 507 阅读 · 0 评论 -
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 · 483 阅读 · 0 评论 -
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 · 487 阅读 · 0 评论 -
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 · 535 阅读 · 0 评论 -
Angular自定义指令示例
1、涉及装饰器下面例子中主要用到了@HostBinding()和@HostListener()两个装饰器,具体作用通过运行下面例子就可以明白。2、创建指令// 以下命令会创建TestDirective指令并自动添加到AppModuleng g directive directive/test3、TestDirective代码import { Directive, HostBindin...原创 2020-04-27 22:14:55 · 434 阅读 · 0 评论 -
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 · 1047 阅读 · 0 评论 -
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 · 1442 阅读 · 1 评论 -
Angular cli8过滤树形结构数据并保留树形结构
1、适用场景实际开发中经常会遇到需要对三级甚至是无限级树型结构进行过滤并且过滤之后仍要保留树形结构的情况,此时采用递归的方式可以满足要求,不但可以完成过滤需求并保留树形结构。2、核心思想如果当前节点包含过滤条件据并且没有子节点则直接保留该节点;如果当前节点不包含过滤条件并且没有子节点则直接不保留该节点;如果当前节点有子节点不管当前节点是否包含过滤条件都对当前节点的子节点进行递归过滤。3、具...原创 2019-08-18 17:21:56 · 855 阅读 · 0 评论 -
angular cli8利用组件递归实现无限级树型结构
应用场景实际开发中经常会遇到需要构造超过三级甚至是无限级树型结构的情况,如果采用逐级拼装的方法将会十分麻烦并且工作量陡增,此时采用递归的方式将会大大简化代码结构并且收到轻巧灵便的效果;在angular中主要是通过组件递归来实现。核心思想1、在父组件的元素上绑定需要递归的数据和递归组件的选择器:// treeDataes为需要递归的数据// recursive-root为递归组件的选择器...原创 2019-06-15 14:53:23 · 1843 阅读 · 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 · 6566 阅读 · 0 评论 -
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 · 2586 阅读 · 0 评论