组件交互方式

通过输入型绑定把数据从父组件传到子组件 @input装饰器是从父组件中传递过来的属性传递到子组件中，即@input写在了子组件里面
通过setter监测输入属性值发生的变化

3. ngOnChanges() 方法来监测输入属性值的变化 4. JSON.stringify() 方法是将一个JavaScript值(对象或者数组)转换为一个 JSON字符串 5. @output输出的子组件中写@Output() onVoted = new EventEmitter();父组件中定义onvoted方法父组件 VoteTakerComponent 绑定了一个事件处理器(onVoted())，用来响应子组件的事件($event)并更新一个计数器。 6. <app-countdown-timer #timer> 利用本地变量#timer绑定到子组件中，就可以在父组件中调用子组件的方法。但是这个方法有局限性，这个父组件-子组件的连接必须全部在父组件的模板中进行，父组件本身的代码对子组件没有访问权。如果想要在父组件的类中调用子组件的方法，就只能通过@viewchild将子组件注入到父组件里面。

angular双向数据绑定原理

angular双向数据绑定原理从UI到数据：UI事件，ajax请求，timeout等。从数据到UI：脏检查

学习

驼峰法则创建模板
prefix 是给组件的前缀；
#heroInput 只能在模板本身作用域内使用，在类内是无法引用的
日期管道 date:'yyyy-MM-dd HH:mm:ss'
ngModule在input上使用时，必须要加入formsModule使用
JSON.stringify() 方法是将一个JavaScript值(对象或者数组)转换为一个 JSON字符串，如果指定了replacer是一个函数，则可以替换值，或者如果指定了replacer是一个数组，可选的仅包括指定的属性。

7.JSON.parse() 方法用来解析JSON字符串，构造由字符串描述的JavaScript值或对象。提供可选的reviver函数用以在返回之前对所得到的对象执行变换(操作)。

泛型

T[]表示T类型的数组

    function loggingIdentity(arg: T[]): T[] {
        console.log(arg.length);  // Array has a .length, so no more error
        return arg;
    }

我们在类那节说过，类有两部分：静态部分和实例部分。泛型类指的是实例部分的类型，所以类的静态属性不能使用这个泛型类型。

泛型约束:可以利用接口的方式来进行 number是没有length这个属性的

    interface Lengthwise {
        length: number;
    }
    function loggingIdentity(arg: T): T {
        console.log(arg.length);  // Now we know it has a .length property, so no more error
        return arg;
    }
    loggingIdentity(3);  // Error, number doesn't have a .length property
    loggingIdentity({length: 10, value: 3});

9.angular的规范：最外层的html必须是class="container"

10.指令和组件的实例有一个生命周期：新建、更新和销毁。通过实现一个或多个 Angular core 库里定义的生命周期钩子接口，开发者可以介入该生命周期中的这些关键时刻。 10. ngOnChanges 每次@input数据更改的时候调用， ngOnInit只调用一次 11. ngDoCheck检测，并在发生 Angular 无法或不愿意自己检测的变化时作出反应。在每个 Angular 脏检查，变更检查变更检测周期中调用，ngOnChanges() 和 ngOnInit() 之后。
12. ngAfterContentInit 在内容投影进组件以后调用，在第一次ngDoCheck后调用，只调用一次 13. ngAfterContentChecked 内容投射完以后调用，每次ngDoCheck以后都要调用 14. ngAfterViewInit 初始化完组件视图及子视图后调用，第一次ngAfterContentChecked完以后调用，只调用一次 15. ngAfterViewChecked 每次做完组件视图和子视图的变更检测之后调用, ngAfterViewInit() 和每次 ngAfterContentChecked() 之后调用。 16. ngOnDestroy()当 Angular 每次销毁指令/组件之前调用并清扫。在这儿反订阅可观察对象和分离事件处理器，以防内存泄漏。在 Angular 销毁指令/组件之前调用。只调用一次

17. ngOnChanges是不执行可变值的（例如对象）,对象属性的改变是在ngDoCheck中执行的

ngDoCheck的特性

没发生一次变更检测就会被调用一次
谁在负责触发变更？（Zones,它拦截了所有的回调：定时器、事件、ajax）拦截以后去通知angular去做变更检查
不要在钩子中写负责的逻辑

js的所有的回调：定时器，事件，ajax

变更检测的两种策略

default：无论哪个组件发生变化，都会从根组件开始全局遍历调用ngDoCheck()
OnPush:只有当组件的@Input属性发生变化的时候才会调用本组件的ngDoCheck 就是在@component中添加changeDetection:ChangeDetectionStrategy.OnPush 就可以了。仔细读这篇文章 https://segmentfault.com/a/1190000010928087

ngAfterViewInit/ ngAfterViewChecked 子组件的先执行，父组件后执行只有这一对执行了，才算是视图装配完。

在组件视图装配的时候调用这两个钩子
视图的装配过程中是从子组件向父组件依次进行的。
这两个钩子里面不能再修改组件上被绑定的属性（ @input进来的属性），否则angular会抛异常
ngAfterViewChecked可能会被调用非常多次，如果没有OnPush策略，所有实现了这个钩子的组件都会被调用，千万不要在这两个钩子里面做复杂的事情，会卡死。到服务器取数据或者大的遍历都不要，最好只是赋值而已。
这一对在content那一对的前面先执行，所以在这一对执行的时候，是可以修改组件上被绑定的值的（@input进来的值）

HostListener装饰器跟HostBinding装饰器

HostListener是关联的方法
HostBinding是关联的属性

动态组件

如何创建动态组件的实例？
如何给动态组件传参数？
如何监听动态组件的事件？
如何销毁动态创建的组件实例？
动态创建的类（组件）一定要放到AppModule的entryComponents里面
动态创建出来的组件是没办法利用@Input实现传值的
子组件如果想要触发事件，就利用@Output的方式

    @Output public follow1 = new EventEmitter();
    this.follow1.emit("follow");其中字符串follow1是这个方法传出来的值，如果需要方法绑定应该绑定的是(follow1)="sayHello()"，如果想在父组件中得到字符串follow，就必须利用sayHello($event)传出值

shadowDoM

是一种渲染模式,它的封装性更好，是在当前dom树的基础上，游离出了一个新的dom树，将style跟html都放在单独这个树里面，不会影响到其他的树。
使用方式就是在@component中添加encapsulation:ViewEncapsulation.Native，就启动了shadowDom模式。不会引用多于的bootstrap.css样式
encapsulation:ViewEncapsulation.Emulated实际上是模拟的shadowDom的模式，是模拟的，所以没有真正的shadowDom模式渲染好这是默认配置，保证当前的样式仅在自身组件使用

内容投影

最基本的ng-content用法、 ng-content 这是父组件投影到子组件的内容区域替换，
用projection slots投影多块内容
把自定义组件投影进去
事件的处理方式

contentChild跟ViewChild

contentChild操作被投影进来的组件在ngAfterContentInit 里面执行在这个组件里面可以改变属性跟方法以及赋值这些操作 contentChild用于获取ng-content里面的组件 viewchild就直接获取子组件

模块语法

一个组件只能属于一个模块，一个项目必须要有一个根模块app.module.ts
./的意思是当前目录下
service是获取数据的地方，放数据的地方

路由

path：'**' 通配符，只要输入当前模板没有的，就跳到这里面来

    {
        path: '',  
        redirectTo: 'home',   //重定向到这里
        pathMatch: 'full'   //就是空的也会跳转首页 
    }

Promise

创建一个promise对象

模版字符串

1.模板字符串中的数据值变量表示${weather}

APP_INITIALIZER

APP_INITIALIZER 是一个函数，在应用程序初始化时被调用。这就意味着可以通过 AppModule 类的 providers 以 factory 的形式配置它来使用，同时应用程序将会等待它加载完成后进行下一步，所以在这此只适合加载简单的数据。第一步创建一个provider

待解决区

this.router.events
    .pipe(filter(evt => evt instanceof NavigationEnd))
    .subscribe(() => this.titleSrv.setTitle());

  @HostBinding('class.layout-fixed') get isFixed() { return this.settings.layout.fixed; }
  @HostBinding('class.layout-boxed') get isBoxed() { return this.settings.layout.boxed; }
  @HostBinding('class.aside-collapsed') get isCollapsed() { return this.settings.layout.collapsed; }

查看httpClient https://angular.cn/guide/http

this.message$ = interval(500).pipe(
    map(i => this.messages[i]),
    take(this.messages.length)
);

interval(500). 这是observal的延时500秒的方法

时刻记住，非纯管道可能每隔几微秒就会被调用一次。如果你不小心点，这个管道就会发起一大堆请求“攻击”服务器。

Angular 的 AsyncPipe 是一个有趣的非纯管道的例子。 AsyncPipe 接受一个 Promise 或 Observable 作为输入，并且自动订阅这个输入，最终返回它们给出的值。 |async

AsyncPipe 管道是有状态的。该管道维护着一个所输入的 Observable 的订阅，并且持续从那个 Observable 中发出新到的值。

httpClient()本身就是一个subject数据？ this.http.get(url).subscribe( result => this.cachedData = result )

作为发布者，你创建一个 Observable 的实例

Observable.of(...items) —— 返回一个 Observable 实例，它用同步的方式把参数中提供的这些值发送出来。 Observable.from(iterable) —— 把它的参数转换成一个 Observable 实例。该方法通常用于把一个数组转换成一个（发送多个值的）可观察对象。 next() 函数可以接受消息字符串、事件对象、数字值或各种结构。

使用 Observable 构造函数可以创建任何类型的可观察流。当执行可观察对象的 subscribe() 方法时，这个构造函数就会把它接收到的参数作为订阅函数来运行。订阅函数会接收一个 Observer 对象，并把值发布给观察者的 next() 方法。 Rxjs创建observal的三种方式 1.创建可观察对象的函数（1）formPromise() //承诺 (2) Interval() //定时器（3）const mouseMoves = fromEvent(el, 'mousemove'); //事件（4）ajax('api/data') ajax事件 2.操作符操作符是基于可观察对象构建的一些对集合进行复杂操作的函数 take(count:number) 拿到想要的前count组数据

错误处理

retry(count:number) 在catchError之前调用这个方法，重新调用请求错误的调用数列，如果是http请求，就重新发起那个 HTTP 请求

<ng-container *ngTemplateOutlet="greet"></ng-container>
<hr>
<ng-container *ngTemplateOutlet="eng; context: myContext"></ng-container>
<hr>
<ng-container *ngTemplateOutlet="svk; context: myContext"></ng-container>
<hr>
<ng-template #greet><span>Hello</span></ng-template>
<ng-template #eng let-name><span>Hello {{name}}!</span></ng-template>
<ng-template #svk let-person="localSk"><span>Ahoj {{person}}!</span></ng-template>

angular4