![](https://img-blog.csdnimg.cn/20210826162331669.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
angular
文章平均质量分 67
angular
guizi0809
前端漫漫之路,一路有我伴随。
展开
-
Angular 动态表单(一)
一、定义表单控件基类// base-form-control.ts// 控件接口,这里定义表单控件可能用到的属性interface Control { value: any; label: string; key: string; controlType: string; placeholder: string; required: boolean; options: Array<{label: string; value: string原创 2021-09-02 17:27:48 · 536 阅读 · 0 评论 -
Angular中ng-content、ng-container和ng-template的区别
一、ng-contentAngular 插槽内容投影的使用(一)Angular 插槽内容投影的使用(二)二、ng-containerng-container是一个特殊的容器标签,不会产生真实的dom元素。<div> <ng-container> <h3>ng-container的使用</h3> <div>hello world!<div> </ng-container></div>渲染原创 2021-09-01 18:03:31 · 804 阅读 · 0 评论 -
Angular中Rxjs常用操作符
默认情况下,使用`null`调度器,这意味着`next`通知是同步发出的,使用不同的调度器可以决定这些通知何时送到。原创 2021-08-31 10:31:58 · 455 阅读 · 0 评论 -
Angular 指令的用法
一、定义为 Angular 应用程序模板中的标签添加额外行为的类。二、分类内置指令属性型指令: NgClass、 NgStyle、 NgModel结构型指令: NgIf、 NgFor、 NgSwitch自定义指令自定义属性型指令创建及使用1.在directives文件目录创建highlight指令ng g d directives/highlight创建的highlight.directive.ts文件如下import { Directive } from '@angular原创 2021-08-28 19:03:21 · 939 阅读 · 0 评论 -
Angular encapsulation视图封装模式
在组件的元数据设置encapsulation,可以分别控制每个组件的封装模式。三个可选的封装模式:ShadowDom: 任何外部样式都无法进来,组件样式也出不去Emulated: 只有全局样式能进来,其他样式无法进来,组件样式也出不去(默认值)None: 任何样式都能进来,组件的样式也都能出去import { Component, OnInit, ViewEncapsulation } from '@angular/core';@Component({ selector: 'ho原创 2021-08-27 16:40:53 · 416 阅读 · 0 评论 -
Angular 动态组件的使用(二)
Angular 动态组件的使用(一)Angular 官网文档 - 动态组件看了Angular官网动态组件的内容,相信很多朋友都是一脸懵逼进去,一脸懵逼出来,当然包括笔者。官网以投放广告为例,每一则广告为一个独立组件,广告面板会动态切换不同的广告,即动态显示不同的组件,而不是同一个广告组件显示不同的广告内容。1. 定义一个容器视图指令组件是特殊的指令,组件可以作为动态组件的视图容器,指令同样可以。定义一个广告容器的指令,该指令作为锚点来告诉 Angular 要把这些广告(即动态组件)插入到什么原创 2021-08-27 15:28:32 · 512 阅读 · 0 评论 -
Angular 动态组件的使用(一)
创建一个容器组件ContainerComponent<div> <h3>我是容器</h3> <ng-template #messageContainer></ng-template></div><button (click)="createComponent()">新建</button><button (click)="clearComponent()">清空</butt原创 2021-08-27 00:06:05 · 833 阅读 · 0 评论 -
Angular 插槽内容投影的使用(二)
ng-content 注意事项ng-content标签不会“产生”内容,只是投影现有的内容,可以理解为移动现有的内容到指定位置,不会对现有的内容进行销毁和重建。验证步骤:我们定义父组件app-father和子组件app-son父组件使用ng-content标签来投影整个子组件父组件使用按钮来控制ng-content的显示和隐藏在子组件生命周期函数OnInit,OnDestroy打印内容验证<!-- 父组件 father模板 --><div> <header原创 2021-08-26 11:41:33 · 468 阅读 · 1 评论 -
Angular 插槽内容投影的使用(一)
在组件模板中,添加ng-content标签,让你希望投影的内容出现在其中。注意:ng-content标签必须是空标签,如该标签有内容,会报编译错误,而Vue的slot插槽不会。单插槽内容投影组件模板只含有一个<ng-content></ng-content>标签<!-- 子组件 app-son 的模板 --><div> <header>头部</header> <ng-content></ng-con原创 2021-08-26 10:26:29 · 489 阅读 · 0 评论 -
Angular 服务的使用(二)
DI,全称为dependency injection,译为依赖注入Token,DI令牌providers: [AnimalService]等价于providers: [{provide: AnimalService, useClass: AnimalService}]当使用提供者providers配置注入器injector时(注入器就是那些被@injectable修饰的类,可以理解为服务),会将该提供者与依赖项注入令牌(Token或叫 DI 令牌)关联起来。注入器允许 Angular 创建任何原创 2021-08-25 11:23:08 · 372 阅读 · 0 评论 -
Angular 服务的使用(一)
一、服务的创建和使用1.服务的创建服务可以简单理解为共享(公用)的模块,可供多个组件使用。例如在Angular项目中,我们使用以下命令创建一个animal服务ng generate service services/animal# 简写命令ng g s services/animal生成的animal.service.ts文件,如下// anmial.service.tsimport { Injectable } from '@angular/core';@Injectable({原创 2021-08-20 17:49:00 · 600 阅读 · 0 评论 -
Angular 动态表单组件库ngx-formly使用说明(二)
请先阅读:Angular 动态表单组件库ngx-formly使用说明(一)一、重要配置项1. expressionPropertiesexpressionProperties可以动态更改表单控件的其他属性 fields: FormlyFieldConfig[] = [ { key: 'disabledControl', type: 'checkbox', defaultValue: false, templateOptions: {原创 2021-08-19 14:21:28 · 2909 阅读 · 2 评论 -
Angular 动态表单组件库ngx-formly使用说明(一)
使用 Angular 框架开发项目,经常会使用到动态表单,这里介绍一款动态表单组件库ngx-formly如何使用,主要风格样式为ng-zorro-antd。一、安装依赖# 安装ng-zorro-antd组件库npm install ng-zorro-antd --save# 安装ngx-formly依赖npm install @ngx-formly/schematics @ngx-formly/ng-zorro-antd @ngx-formly/core --save二、使用说明1.为ng原创 2021-08-18 17:34:02 · 2904 阅读 · 0 评论 -
创建Angular项目及常用命令
1.首先需要安装node.js,查看node.js和npm版本,若能显示版本号说明安装成功(附:nodejs安装教程)2.安装angular脚手架// 全局安装npm install -g @angular/cli安装完成后使用ng --version查看版本号,显示版本号则证明安装成功(当前版本:12.2.1)...原创 2021-08-16 11:39:42 · 4901 阅读 · 0 评论 -
angular 解决跨域问题
1. 在 angular 项目的根目录创建 proxy.config.json 文件2. 配置 package.json 文件原创 2021-07-06 11:03:47 · 224 阅读 · 0 评论