SeriousLose

1、派生组件不能继承父组件的注入器 2、父组件与派生组件之间没有任何关联 3、父组件注入的服务，那么派生组件也必须注入父组件依赖的服务 4、在派生组件中的constructor中使用super(...)往组件中传递。在传统的开发模式中，调用者负责管理所有对象的依赖，循环依赖一直是梦魇，而在依赖注入模式中，这个管理权交给了注入器(Injector)，它在软件运行时负责依赖对象的替换，而不是在编译时。通过控制反转，对象在被创建的时候，由一个调控系统内所有对象的外界实体，将其所依赖的对象的引用传递给它。

因为组件编译的过程发生在编译过程中，因此我们可以根据引用到指令，来排除未引用的指令，从而可以在 Tree-shaking 过程中，将未使用的指令从包中移除，这便是增量 DOM 可树摇的原因。Ivy 引擎基于增量 DOM 的概念，它与虚拟 DOM 方法的不同之处在于，diff 操作是针对 DOM 增量执行的（即一次一个节点），而不是在虚拟 DOM 树上执行。虽然增量 DOM 带来了减少内存使用的解决方案，但是该解决方案影响了增量 DOM 的速度，因为增量 DOM 的差异计算比虚拟 DOM 方法耗费更多时间。

Angular Schematics 是基于模板(Template-based)的，Angular 特有的代码生成器，当然它不仅仅是生成代码。新增ng-add指令。

React中如何使用组件？◦ Angular中如何使用组件？◦ Vue中如何使用组件？

Textarea 自动换行

NG Format 格式化建议NG Merit ng 优点NG New 创建项目，文件介绍NG Basis 基础NG Text 文本绑定、属性绑定NG ngIf、ngSwithch 条件判断 *ngIf 、ngSwithchNG ngFor 数据循环NG Click 点击NG @input 父组件给子组件传值NG @Output 子组件通过@Output触发父组件的方法NG @ViewChild 父组件通过@ViewChi...

Angular 应用主要由组件及其 HTML 模板组成。 由于浏览器无法直接理解 Angular 所提供的组件和模板，因此 Angular 应用程序需要先进行编译才能在浏览器中运行.<aside> 💡 即时编译(JIT,Just in time)，它会在运行期间在浏览器中编译你的应用。 预先编译（AOT,Ahead of time)，它会在构建时编译你的应用。</aside><aside> 💡 运行ng build（仅编译）或者 ng serve（编译并..

target.selectionStart 表示光标位置<textarea [(ngModel)]="value" (keyup)="getCaretPosWithEvent($event)"></textarea>getCaretPosWithEvent (event: { target: any; }) { const target = event.target; if (target.selectionStart || target.selecti

每行代码多少字合适?100字模板格式化?Prettier 的默认设置格式化的效果 开始标签末尾的尖括号看上去有点突兀。 所有属性全部换行，整体有些松散，模板代码可能变得很长。 标签和属性的区分度不高。 属性排序及建议CSS Positioning Box model Typographic Visual Misc 元素属性的排序 模板引用变量 class 结构型指令 属性型指令 双向绑定 属性绑定

ElementRef获取视图层的dom元素，借助Augular提供的依赖注入机制，轻松的访问到dom元素定义/** * A wrapper around a native element inside of a View. * * An `ElementRef` is backed by a render-specific element. In the browser, this is usually a DOM * element. * * @security Permittin

@NgModule({ declarations: [], // 用到的组件，指令，管道 providers: [], // 依赖注入服务 imports: [], // 导入需要的模块 exports: [], // 导出的模块，跨模块交流 entryComponents: [],// 需提前编译好的模块 bootstrap: [] // 设置根组件})export class AppModule.

Set & Get组件传值，监听数据修改；// 组件接收一个userId值<app-user-list [userId]="userId"></app-user-list>export class UserListComponent { // ... @Input() userId: number; // ...}export class UserListComponent { private _userId: number;

ts文件中使用管道new TimeFormatPipe().transform('2021-11-04T11:34:51','YY-MM-DD hh:mm:ss')大小写转换<p>{{str | uppercase}}</p>//转换成大写<p>{{str | lowercase}}</p>//转换成小写日期格式转换<p>{{today | date:'yyyy-MM-dd HH:mm:ss' }}</p&gt

ng-container ng-container简单理解为一个逻辑容器，用来做一些逻辑处理的。 ng-container既不是一个Component，也不是一个Directive，只是单纯的一个特殊tag。 这点类似于template，Angular复用了HTML5规范中template 的tag的语义，不过并没有真正利用其实现， 因此在审查元素中是永远也找不到...

ng-content ng-content是内容映射指令(也叫内容嵌入)，内容映射指的是在组件中嵌入模板代码，方便定制可复用的组件，很好地扩充组件的功能，方便代码的复用。 ng-content中的组件组件只被实例化了一次 - 从未被销毁和重新创建； 即ngOnInit() 只执行一次 <ng-content> 不会...

ng-template <ng-template>是一个 Angular 元素，它永远不会直接显示出来。 在渲染视图之前，Angular 会把<ng-template>及其内容替换为一个注释 需要通过其他结构型指令（如 ng-if）或 template-ref 将模块内容渲染到页面中 ng-templat...

ChangeDetectorRef Angular 各种视图的基础类，提供变更检测功能。 变更检测树会收集要检查的所有视图。 使用这些方法从树中添加或移除视图、初始化变更检测并显式地把这些视图标记为脏的，意思是它们变了、需要重新渲染。 详情请查看 https://angular.cn/api/core/ChangeDetectorRef // 导入 ChangeDetector...

创建项目ng new 项目名称创建带路由ng new 项目名称 --routing启动项目ng serve —open简写ng serve -o创建模块ng g module Module/Module名创建懒加载模块ng generate module customers --route customers --module app.moduleng g module 模块名 --route 模块名 --mod.

环境要求 node版本 安装需要升级的angular-cli版本； 示例 npm install -g @angular/cli@latest 输入命令 ng update 根据所显示的command to update进行升级 执行 com...

路由： 路由在执行过程中对组件无状态操作，即路由离退时组件状态也一并被删除； 路由的本质： Angular路由与组件一开始就透过 RouterModule.forRoot 形成一种关系，当路由命中时利用 ComponentFactoryResolver 构建组件； 每一个路由并不一定是一次性消费，Angular 利用 R...

@ViewChild @ViewChildren 和@ViewChild用法相同，结果会返回QueryList @ContentChild 获取<ng-content></ng-content>标签中的符合条件的第一个组件 @ContentChildren 获取<ng-content></ng-content>标签中的符...

引入JQ 安装依赖 npm install --save jquery 安装type类型 cnpm install @types/jquery --save 使用 import * as $ from 'jquery'; ...

组件的继承// 基础组件// base.component.html<p>base works!</p><div>{{aa}}</div><div class="fl-div">{{bb}}</div>// base.component.tsimport { Component, Input, OnInit } from '@angular/core';@Component({ selector: 'l-ba

组件传值实现双向绑定 output绑定事件，由组件绑定事件EventEmitter向父组件传输信息，属性名+属性后缀Change 是约定的固定写法；// child.component.html<h1>status in child: {{childStatus}}</h1><button (click)="toggle()">Toggle childStatus</button>// child.component.tsimport

:host /deep/ // 当前组件和其子组件内部样式生效/deep/ 组合器还有两个别名：>>> 和 ::ng-deep。encapsulation可选值为 Emulate(默认) | Native | None(可进可出) | ShadowDom@Component({ selector: 'fx-button', // 指定组件的样式封装性 encapsulation: ViewEncapsulation.None, templateUrl: './

Angular Service // service文件 import { Injectable } from '@angular/core';import { BehaviorSubject } from 'rxjs/BehaviorSubject';@Injectable()export class BmsEventManagerService { constructor() { } menuSubItems: any = []; // 菜单数组 menuSubItemsEv

钩子说明constructor()构造函数ngOnChanges()当 Angular（重新）设置数据绑定输入属性时响应。 该方法接受当前和上一属性值的 SimpleChanges 对象在 ngOnInit() 之前以及所绑定的一个或多个输入属性的值发生变化时都会调用。ngOnInit()在 Angular 第一次显示数据绑定和设置指令/组件的输入属性之后，初始化指令/组件。在第一轮 ngOnChanges() 完成之后调用，只调用一次。ngDoCheck()检...