使用Angular实现故事书的StoryShots - 腾讯云开发者社区

之前在没学精angular的时候,想实现搜索功能的时候,总是想着从数据库里获取搜索的结果,可殊不知,原来在angular中只需要简单的几行代码就实现了最常用的搜索功能....下面就来说说如何实现: 1. export class person{ constructor( public name:string, public age:number ){..., 当input表单内容改变的时候,agefilter就会发射改变后的内容 3.获得内容之后在组件中订阅改变后的内容 private agefilter:FormControl=new FormControl...500).subscribe((value)=>{ this.keyword=value }) } 需要在头部引入 import { FormControl } from '@angular...使用ng指令 ng g pipe pipe/searchPipe 代码如下 import { Pipe, PipeTransform } from '@angular/core'; @Pipe({

4.1K6 0

angular组件的基本使用

angular组件的基本使用组件组件模板 ng generate component xxx 新建组件(大驼峰命名) 属性绑定 public...管道 {{currentTime | date:'yyyy-MM-dd HH:mm:ss'}} public currentTime: Date = new Date(); 常用管道组件间的通讯...通讯方案直接的父子关系，父组件直接访问子组件的 public 属性和方法直接的父子关系，借助于 @Input 和 @Output 进行通讯没有直接关系，借助于 Service 单例进行通讯利用...cookie 和 localstorage 进行通讯利用 Session 进行通讯直接调用父组件访问子组件方法 //子组件定义一个public的方法,父组件直接调用 //子组件 public...//子组件 @Input() public panelTitle:string; //父组件上可以这样设置 panelTitle 这个参数的标题"></

1.5K3 0

您找到你想要的搜索结果了吗？

是的

没有找到

使用Angular的依赖注入

首先介绍 Angular 中依赖注入的相关概念: Service 服务 Service 的表现形式是一个class，可以用来在组件中复用比如 Http 请求获取数据，日志处理，验证用户输入等都写成Service...，供组件使用。...import { Injectable } from '@angular/core'; // 在 Angular 中，要把一个类定义为服务，就要用 `@Injectable` 装饰器来提供元数据 @Injectable...userFactory 除了useClass写法，还可以使用 userFactory 工厂方法，这个方法返回的实例作为构造函数中productService参数的内容。...当声明在组件和模块中的提供器具有相同的token时，声明在组件中的提供器会覆盖模块中的那个提供器。

9981 0

Angular--Module的使用

Angular 是一个用html 和typescript 构建客户端应用的平台与框架。它将核心功能和可选功能作为一组TypeScript 库进行实现，你可以把它们导入到你的应用中。 1....exports（导出表） —— 用于其它模块的组件模板中使用的声明对象的子集（the subset of declarations）。...imports（导入表） —— 其他模块，本NgModule声明的组件需要使用它们的导出类。 providers —— 本模块向全局服务中贡献的那些服务的创建器。这些服务能被本应用中的任何部分使用。...app 时 CommonModule @angular/common 当你想要使用NgIf 和NgFor时 FormsModule @angular/forms 当要构建模板驱动表单时 ReactiveFormsModule...@angular/forms 当要构建响应式表单时 RouterModule @angular/router 当要使用路由功能，并且你要用到RouterLink, forRoot() 和.forChild

4.9K4 0

Angular 中 SASS 样式的使用

这是我参与「掘金日新计划 · 4 月更文挑战」的第18天。在 Angular 自定义指令 Tooltip 文章中，我们说会出一篇关于 sass 样式的文章，现在它来了。....scss 为后缀，语法用 {} 修饰 .sass 为后缀，语法是缩紧方式推荐使用 .scss 项目集成 angular 项目使用脚手架生成，在添加样式这一个步骤，会询问你编写样式的方式，让你选择...在 angular 中编写样式，可以分为组件样式和全局样式。...全局样式 angular 脚手架生成的项目，默认在 src/style.scss 文件存放全局的样式。在这个文件修改的样式，将对整个应用的样式产生影响。...使用嵌套在使用 css 样式的时候，我们需要对不同元素进行样式的编写，我们需要考虑到元素所在的层次，采用不同的权重对其进行修改。

5K2 0

Angular Elements 组件在非angular 页面中使用的DEMO

它借助Chrome浏览器的ShadowDom API，实现一种自定义组件。这种组件可以用Angular普通组件的开发技术进行编写，学习成本低，当它构建好后生成一个打包的js文件。...如果页面引入该Js文件，就相当于在页面中新增了一个标签，所以在任意框架中都可以使用新标签，就像它是原生div一样。 ...二、Angular Elements 使用实战前不久看到项目angular-elements-dashboard ：支持动态加载模块和动态加载外部的模块。...总结一下，通过使用两个种方式操作自定义元素和以前学习的内置元素的概念一模一样。 ...它的目的是为了不改变Native的模式情况下，引入最新的Shadow Dom v1技术，而Native已经过时，不鼓励使用。

2.7K2 0

Angular2 组件的使用

创建组件需要三步： 1.从 @angular/core 引入 Component 装饰器 2.创建一个类，并用 @Component 修饰 3.在 @Component 中，设置selector、template...创建和插入这个组件实例的元素属性。...templateUrl（模版地址）： HTML的一种形式，它告诉Angular如何呈现这个组件。...template （模板）： HTML的一种形式，它告诉Angular如何呈现这个组件。...styleUrls（模版样式地址）： css样式，在组件模版中引用的css样式。 ---- sivona

1.5K3 0

Angular 实现类似微服务的效果

angular.json配置 18002和80000的内容基本一样只需要修改路径 { "$schema": "..../build-angular:browser", "options": { "outputPath": "dist/18002", "...} }, "test": { "builder": "@angular-devkit/build-angular:karma",...} }, "test": { "builder": "@angular-devkit/build-angular:karma",...} } } }, "defaultProject": "80000" } tsconfig.80000.json配置多个json文件只需要修改每个project的入口文件路径

931 0

基于 Angular Material 的 Data Grid 设计实现

data-grid.jpg 自 Extensions 组件库发布以来，Data Grid 成为了使用及咨询最多的组件。...这几天又重构了一下官网示例，目前的 API 文档放在了 gitbook 上，暂时还没有和官网整合，国内访问会比较慢。本文会介绍 Data Grid 的使用方法及比较好的一些功能实现。...Angular Material 对于 table 的封装已经足够灵活，但是模板的定义依然很繁琐，也缺少很多刚需功能。...模板是 angular 组件极其灵活的一个功能。大部分优秀的第三方组件都具有自定义模板的能力，而在 Data Grid 中，模板更是一个不可或缺的功能。...官网示例：Expandable row 行展开的实现借助了 Angular Material 表格的 multiTemplateDataRows 参数，实现细节很多。

5.1K2 0

Angular中ui-select的使用

Angular中ui-select的使用最近工作一直很忙，没有时间整理知识，前几天项目中需要用到angular-ui-select，实现下拉框快速过滤效果，今天有时间研究了一下，终于搞明白了。...所依赖的Angular和Angular-sanitize最低版本，只有依赖的版本符合要求，才能实现功能，否则会报错。...2.安装方法：使用npm进行安装 npm install Angular-sanitize@1.2.28 --save -dev @+版本号表示安装指定版本的包文件，如果不加版本号，默认安装最新的版本...二、使用方法 1.首先依次引入所需要的文件 ?...当然ui-select不止这一种用法，还有许多意想不到的功能。本实例和其他功能实现在github：https://github.com/lela520/angular-ui-select。

3K6 0

Angular入门，开发环境搭建，使用Angular CLI创建你的第一个Angular项目

前言：　　最近一直在使用阿里的NG-ZORRO（Angular组件库）开发公司后端的管理系统，写了一段时间的Angular以后发现对于我们.NET后端开发而言真是非常的友善。...因此这篇文章主要是对这段时间使用Angular做一些小总结，希望可以帮到有需要的同学。...注意：constructor 构造函数（依赖注入，起到对应局部变量值初始化作用）：除了使用简单的值对局部变量进行初始化之外，什么都不应该做！！...[请求数据时使用] ngDoCheck() 检测，并在发生 Angular 无法或不愿意自己检测的变化时作出反应。...NPM的安装源：临时切换使用： npm --registry https://registry.npm.taobao.org install express 持久使用（推荐）： npm config

2.8K2 0

Angular中sweetalert弹框的使用详解

最近太忙了，项目中使用的弹框老板嫌太丑，让我们优化一下，我在网上找了一下，找到了sweetalert弹框，算是比较好看的弹框了。...V1.0.4 Sweetalert V2.1.0 因为我们项目使用的angular版本较低，所以相对应下载的angular-sweetalert版本也低。...一定要注意版本，如果angular-sweetalert版本过高，所依赖的文件angular版本过低，会导致引入报错。...2、API问题在这个版本中以下写法只能实现title和text的效果，其他属性都不起作用 1 swal({ 2 title: "确定删除吗？"..., "你的虚拟文件已经被删除。", "success"); 12 }); 在这个版本中只能按照我最上面所列举的去实现，那是我在官方英文文档中发现的，中文文档太坑了。

2.8K4 0

Angular中ui-grid的使用详解

Angular中ui-grid的使用　　在项目开发的过程中，产品经理往往会提出各种需求，以提高用户体验。最近，项目中用到的表格特别多，而且表格的列数和行数也超多。...就这样一个看似十分easy的需求，我研究了一周时间，终于给实现了。　　刚开始我研究bootstrap-table，这个插件可以实现表头固定的效果。...依赖的angular版本的angular版本二、引入文件 ? 　　...三、基本使用　　1、HTML 1 使用方法详见：https://github.com/lela520/Angular-ui-grid

2.1K2 0

angular2关于内置通道的使用

expression是一个数字： digitInfo是string具有以下格式的： {minIntegerDigits}....{minFractionDigits}-{maxFractionDigits} minIntegerDigits是要使用的最小数字的整数数字。...默认为1 minFractionDigits是分数后的最小位数。默认为0 maxFractionDigits是分数后的最大位数。...value: string) { this.value = value; } } 4.日期格式转换 {{ today | date[:format] }} today是一个日期对象或数字（自UTC时代以来的毫秒...）或ISO字符串 [:format] 指明要包括的日期/时间组件。

6252 0

使用 Commitizen 撰写 Angular 规范的 Commit Message

使用用 git cz -m 代替 git commit -m 就可以轻松的写出 Angular 规范的 commit message 了。...commit message header 格式如下： type(scope): subject type：commit 的类型，有如下7种： feat: A new feature fix...that improves performance test: Adding missing tests or correcting existing tests scope：commit 影响的范围...subject：commit 目的的简明描述

7582 0

使用APP_INITIALIZER实现Angular运行时环境变量配置

创建一个angular空项目 ng new angular-runtime-config 因为是demo 这里就不选择路由了，css我使用scss ?...创建一个名为config的service文件 cd angular-runtime-config ng g service config 对config.service.ts文件增加两个方法和一个私有属性...app.compontent.ts中添加console.log来判断一下是否appConfig早于app.component执行现在我们在app.compontent.ts中试着调用ConfigService中的getConfig...github源码 https://github.com/lilugirl/angular-runtime-config

9262 0

angular使用NG ZORRO来构建博客展示项目(简单实现展示页面)

从angular2到现在的angular5http模块也有些变化。.../blog.service"; providers: [ BlogService ], 博客模块列表组件我打算这样实现列表，上面一个大的搜索框，下面就是列表，不用分页，使用加载更多的方式...image.png 先简单实现，后面再慢慢优化吧 ?...简单实现添加点动画效果定义两组动画：入场浮动动画，点击喜欢时的动画效果在share文件夹下添加一个动画效果文件animations.ts。...加入动画效果有动画使用相关疑惑的可以参考我的这篇文章及其相关文章：Angular练习之animations动画源码下载思考 angular模块，组件，普通的ts文件之间的关系和区别。

1.6K3 0

使用.net core ABP和Angular模板构建博客管理系统（实现自己的业务逻辑）

返回目录之前写到使用.net core ABP 和Angular模板构建项目，创建后端服务。...文章地址：http://www.jianshu.com/p/fde1ea20331f 创建完成后的api基本是不能用的，现在根据我们自己的业务逻辑来实现后端服务。部分业务逻辑流程图 ?...CreateMap(); CreateMap(); //使用自定义解析..."已发布" : "未发布"; } } } 使用授权关于ABP授权详细的介绍和使用请看我的另一篇文章：http://www.jianshu.com/p/6e224f4f9705...因为是自己的博客系统，没必要那么麻烦就只使用了入口权限定义在类的上面。

8281 0

RxJS 在 Angular响应式表单中的使用

响应式表单 FormControl 的 valueChanges 属性和 statusChanges 属性包含了会发出变更事件的可观察对象。...例子 import { Component, OnInit } from '@angular/core'; import { FormBuilder, FormGroup, Validators, FormControl..., AbstractControl } from '@angular/forms'; import { concat, merge, zip, combineLatest, race } from 'rxjs...，只需要在pipe添加相应的运算符。...，再输出成一个值 // 这个有个问题是只有合并的元素都产生值才会输出内容，所以在上面使用startWith赋初始化值 combineLatest(username$, status$)

5.1K1 0

storybook插件说明： integrations与addons推荐

我的组件库在线预览。docs插件文档viewport插件这个插件可以对tab页新增个选项，跟chrome里的切换不同设备有点像，使用这个功能，就可以把一个组件放入不同设备大小的story里。...一般是用来检查视障人士能不能分辨之类的。基于axe搞的。效果预览地址。a11y插件文档storyshots插件这个插件官网写的让人有点晕，实际还分成2个插件，都是jest相关。...主要插件是storyshots，它可以把jest运行结果置于底部控制台页上，介绍说还可以拿到旧代码快照什么的，有点没懂怎么搞。...storyshots插件文档puppeteer插件文档好用的社区插件官方插件就上面那些，有些社区插件写的也很不错，可以看看。...效果在线预览插件文档地址storybook-addon-versions 插件这个插件不支持storybook5，有段时间没维护了，就说一下功能吧，就是可以通过配置版本号实现各个版本的组件库中穿梭。

1K2 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

angular使用管道实现搜索功能

angular组件的基本使用

使用Angular的依赖注入

Angular--Module的使用

Angular 中 SASS 样式的使用

Angular Elements 组件在非angular 页面中使用的DEMO

Angular2 组件的使用

Angular 实现类似微服务的效果

基于 Angular Material 的 Data Grid 设计实现

Angular中ui-select的使用

Angular入门，开发环境搭建，使用Angular CLI创建你的第一个Angular项目

Angular中sweetalert弹框的使用详解

Angular中ui-grid的使用详解

angular2关于内置通道的使用

使用 Commitizen 撰写 Angular 规范的 Commit Message

使用APP_INITIALIZER实现Angular运行时环境变量配置

angular使用NG ZORRO来构建博客展示项目(简单实现展示页面)

使用.net core ABP和Angular模板构建博客管理系统（实现自己的业务逻辑）

RxJS 在 Angular响应式表单中的使用

storybook插件说明： integrations与addons推荐

扫码

相关资讯

热门标签

活动推荐

运营活动

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐