cc的博客

版本：Angular11第一种方式首先在app-routing文件下设置RouterModule在点击相同的路由下能触发路由事件@NgModule({ imports: [RouterModule.forRoot(routes, { onSameUrlNavigation: 'reload' })], exports: [RouterModule]})export class AppRoutingModule {}然后再去需要刷新的页面获取路由触发事件，在路由导航成功

Angular的路由每个模块都可以创建一个路由模块，在根模块的路由模块应该是forRoot，其他路由模块应该是forChild 。RouterModule 可能会被多次导入：每个惰性加载的发布包都会导入一次。 但由于路由器要和全局共享的资源 - location 打交道，所以不能同时激活一个以上的 Router 服务。所以整个应用调用的都是同个Router服务，类似于单例。这就是需要两种方式来创建本模块的原因：RouterModule.forRoot 和 RouterModule.forChild。

angular变更检测分为默认的（“CheckAlways”）变更检测策略 和 OnPush（“CheckOnce”）变更检测策略，angular变更检测是一种单向数据流，也就是检测永远是从父组件到子组件的，如果在一次变更周期内子组件去更改父组件就会报错（但是页面数据是能正确显示出来的），因为父组件已经检测完毕，再去改变父组件就违反了单向数据流。onPush会让应用性能更高，推荐使用onPush变更策略。默认变更触发时机事件：页面 click、submit、mouse down……XHR：从后端服

组件的生命周期和指令的生命的周期唯一区别就是指令没有AfterContentInit和AfterContentChecked，因为指令没有投影。在组件或父组件发生变更检测的时候都会调用三个变更检测方法：ngDoCheck、ngAfterContentChecked、ngAfterViewChecked以下生成的生命周期方法即为组件生命周期执行顺序import {AfterContentChecked,AfterContentInit, AfterViewChecked,AfterViewInit

angular为了提高应用的性能，把管道分为纯管道和非纯管道，纯管道只会在检测变更以后更新数据，对于一些引用类型对象使用纯管道，当引用对象内部发生变化的时候，不会触发检测变更，纯管道也就不会更新数据。管道默认是纯管道，纯管道也会让应用性能更高。如果我们自己创建的管道需要使用非纯管道只需要在管道的@Pipe装饰器中设置pure属性为false即可：@Pipe({ name: 'flyingHeros', pure: false})export class FlyingHerosPipe impl.

DI：依赖注入，是一种设计模式，很多优秀的框架都实现了这种模式，比如spring框架。angular自身也实现了一套依赖注入，只需要把主要的服务在用到的类的构造函数注入就可以。一般我们需要依赖注入的都是一些获取数据的服务，要让一个类成为可注入的服务就需要使用@Injectable()装饰器。设置注入服务有三种方式，三者选其一即可在服务本身的 @Injectable() 装饰器中。在 NgModule 的 @NgModule() 装饰器中。在组件的 @Component() 装饰器中。@Inje

自己创建的组件，在页面引用的时候组件标签里面填写的内容是不生效的，因为组件不具备投影功能，但是我们可以在组件里面添加ng-content标签，ng-content 相当于一个插槽，我们在组件标签里面设置的数据会显示在ng-content里面，也可以设置多个ng-content，然后设置select属性选择对应的内容。组件 html代码<h3>组件投影</h3><div> <p>showDown</p> <div class="b

ViewContainerRef 可以包含一个或者多个视图的容器TemplateRef 内嵌模板，可用来创建内嵌视图EmbeddedViewRef 内嵌视图假设ts中注入private viewContainerRef：ViewContainerRef ，private templateRef：TemplateRef 两个服务在ViewContainerRef 和TemplateRef 中都有createEmbeddedView创建视图的方法，所以往ViewContainerRef 容器插入视图

自定义一个结构型指令 * appUnless，当传入的值为false时显示，为true时隐藏。和ngIf的作用相反unless.directive.tsimport {Directive, Input, TemplateRef, ViewContainerRef} from '@angular/core';export class UnlessContext<T = unknown> { public $implicit: T = null!; public appUnless: