SeriousLose

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

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

【代码】scss。

Textarea 自动换行

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

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

关键字 范围 变量提升 可以重新分配 可以重新定义 var 全局、局部 Yes Yes Yes let 局部 No Yes No const 局部 No No No 能用const的情况尽量使用const，其他情况下大多数使用let，避免使用varvar 在ES5中，顶层对象的属性和全局变量是等价的，用var声明的变量既是全局变量，也是顶层变量 注意：顶层对象，在浏览器环境指的是wi

Eexportexport关键字，可以导出变量、函数、类给其他模块。变量导出直接导出 先定义，后导出 重命名导出// 导出变量--写法1export let name = 'Peter';// 导出变量--写法2：先定义，再导出let name1 = "Peter";export { name1 };// 导出变量--写法3：重命名let name2 = "Peter";export { name2 as PersonName }; // 这里export时记得加花括号，

注解(annotation)注解为程序的元素(类、方法、变量)加上更直观更明了的说明,这些说明信息与程序的业务逻辑无关,而是供指定的工具或框架使用的.import { Component } from '@angular/core';@Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css']})export class App

装饰器装饰器是实现 AOP（面向切面）编程的一种重要方式。 装饰器是一种特殊类型的声明，本质上就是一个方法，可以注入到类、方法、属性、参数上，扩展其功能； 常见的装饰器： 类装饰器、 属性装饰器、 方法装饰器、 参数装饰器... 装饰器在写法上有： 普通装饰器(无法传参)、 装饰器工厂(可传参) 装饰器已是ES7的标准特性之一，是过去几年JS最大的成就之一启用装饰器// tsconfig.json 中添加 "compilerOptions": {

优化错误提示interface IOptions { name: string age: number extra: { data: Object methods: Object }}// 参数options要求符合IOptions定义的规则function sthConstructor (options: IOptions) {}// options对象当中并没有任何ts的静态检查和提示const options = {

基本类型别名type Name = string联合类型interface Dog { wong();}interface Cat { miao();}type Pet = Dog | Cat具体定义数组每个位置的类型type PetList = [Dog, Pet]获取类型// 当你想获取一个变量的类型时，使用 typeoflet div = document.createElement('div');type B = typeof

字符串新特性 字符串换行特性 在原js中,字符串不能直接换行.要通过+号进行拼接. 现在可以用``,可以自动换行 // 编译前 var str = `aaa bbb ccc`// 编译后 var str="aaa\\nbbb\\nccc\\n" 字符串模板 可以用``来进行写html模板 var name = "张三"; var getName=function(){

类型断言 通常这会发生在你清楚地知道一个 实体具有比它现有类型更确切的 类型。 通过 类型断言这种方式可以告诉编译器，“相信我，我知道自己在干什么”。 类型断言好比其它语言里的 类型转换，或者类型装箱，但是不进行特殊的 数据检查和 解构。 它没有运行时的影响，只是在 编译阶段起作用。 TypeScript会假设你已经进行了必须的检查。 “尖括号”语法 as语法 两种形式是等价的。 当你在 TypeScript里使用 JSX时，只有

使用any的原因是： 有些参数很难正确输入，但是 any 更容易 我真的不知道参数是什么 可以使用 unknown，示例一 // 示例一type ParsedType = { id: number}const parseApiResponse( response: Record<string, unknown>): ParsedType => { // without doing the type cast we would

TypeScript有13中数据类型布尔值(Boolean)最基本的数据类型就是简单的 true/ false值，在 JavaScript和 TypeScript里叫做 boolean（其它语言中也一样）。let isDone: boolean = false;数字(Number)和 JavaScript一样， TypeScript里的所有数字都是 浮点数。这些 浮点数的类型是 number。 除了支持 十进制和 十六进制字面量， TypeScript还支持 ECMAScript20

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...

patchVnode // 对比新旧节点,vnode渲染成真实dom,并返回vnode function patchVnode( oldVnode: VNode, vnode: VNode, insertedVnodeQueue: VNodeQueue ) { const hook = vnode.data?.hook; /...

function invokeDestroyHook(vnode: VNode) { const data = vnode.data; if (data !== undefined) { // 执行用户设置的destroy 钩子函数 data?.hook?.destroy?.(vnode); // 调用模块的destroy钩子函数 for (let i = 0; i < cbs.destroy.length; ++i) cbs.d...

function addVnodes( parentElm: Node, before: Node | null, vnodes: VNode[], startIdx: number, endIdx: number, insertedVnodeQueue: VNodeQueue ) { for (; startIdx <= endIdx; ++startIdx) { const ch = vnodes[startIdx];...

createElm function createElm(vnode: VNode, insertedVnodeQueue: VNodeQueue): Node { let i: any; let data = vnode.data; if (data !== undefined) { // 执行用户设置的init钩子函数 const init = data.hook?.init; /...

patch(oldVnode,newVnode) 俗称打补丁，把新节点中变化的内容渲染到真实DOM,最后返回新节点作为下一次处理的旧节点 对比新旧VNode是否相同节点（节点的key和sel相同） 如果不是相同节点，删除之前的内容，重新渲染 如果是相同节点，再判断新的VNode是否有text，如果有并且和oldVnode的test不同，直接更新文本内容； ...

import { DOMAPI, htmlDomApi } from "./htmldomapi";import * as is from "./is";import { Module } from "./modules/module";import { vnode, VNode } from "./vnode";// 导入依赖的模块// 定义类型type NonUndefined<T> = T extends undefined ? never : T;funct..

import { AttachData } from "./helpers/attachto";import { Hooks } from "./hooks";import { Attrs } from "./modules/attributes";import { Classes } from "./modules/class";import { Dataset } from "./modules/dataset";import { On } from "./modules/eventlist.

h函数 vue中使用h()函数 new Vue({router,store,render:h=>h(App)}).$mount(“#app”) h()函数最早见于hyperscript,使用JavaScript创建超文本 Snabbdom中的h()函数不是用来创建超文本，而是创建VNode 函数的...

Snabbdom源码解析 如何学习？ 宏观了解 带目标看源码 看源码过程要不求甚解 要多进行调试 多参考相关资料 Snabbdom的核心 使用h()函数创建JavaScript对...

创建项目 创建项目目录 snabbdom md snabbdom 初始化package.json npm init 或 yarn init 安装打包工具 npm install parcel-bundler --save-dev 或 yarn add...

function add(a) { var num = function (b) { a = a + b; return num; }; num.valueOf = num.toString = function () { return a; }; // 当引用类型需要转为字符串时，自动调用toString方法 // 当引用类型需要转为数字时，自动调用valueOf方法 return num; }co...

Decorator（装饰器） 装饰者模式就是一种在不改变原类和使用继承的情况下，动态地扩展对象功能的设计理论。 优点 代码可读性变强了，装饰器命名相当于一个注释 在不改变原有代码情况下，对原来功能进行扩展 修饰对象 2种 类的装饰 类属性的装饰 ...

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

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

接口(Interface)// 用来建立某种代码约定,使得其它开发者在调用某个方法或者创建新的类时,必须遵循接口所定义的代码约定接口的前面加了一个 I 字母规范 在代码设计中，接口是一种规范； 接口通常用于来定义某种规范, 类似于你必须遵守的协议, 站在程序角度上说接口只规定了类里必须提供的属性和方法， 从而分离了规范和实现，增强了系统的可拓展性和可维护性； const getUserInfo = function (user) { .

函数 将一系列代码或者操作行为打包到一起形成的就是函数,一块有特定功能的代码. 存放运行逻辑的代码块,以便重复使用 函数声明和函数表达式却别 函数声明 是function开头 作为关键字,声明函数,并紧接 函数名 (){}； 函数声明必须是一条单独的语句,并且必须具备函数名,这是调用函数的基础； 其他都是函数表达...

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

什么是TypeScript?TypeScript 是 微软开发的一门编程语言，是Javascript的一个超集，遵循最新的ES6脚本语言规范，扩展了JavaScript语法。angular2框架本身就是由typescript语言编写的。TypeScrip 是静态类型语言；TypeScript的好处？1.支持ES6语言(未来的主流语言)2.IDE支持1.类型检查2.语法提示（根据上下文，提示出来）3.重构(很方便的修改变量和方法)3.Angular2的开发语言4.清晰的函