Yiki - Be a cool coder

# 面试相关

# Annotation和Decorator有什么区别？

  • both @
  • annotation（注解）用来指定一个类的metadata set.
  • decorator在Angular中是一种设计模式, 但不修改原有代码的基础上，对类进行修改和装饰。

# 装饰器

  • Features of Decorators: ( 是ts的，ng只有注解)
    • Decorators are predefined in AngularJs.
    • Decorators are used by TypeScript compiler.
    • Decorators are used to attach metadata to a class,objects and method.
Class decorators like @Component, @NgModule
Property decorators like @Input and @Output
Method decorators like @HostListener
Parameter decorators like @Injectable

// e.g
 <p #parent>父组件</p>

@ViewChild('parent') el:any
  constructor() {
  }

  ngOnInit(): void {
  }
  ngAfterViewInit(){
    let attrEl = this.el.nativeElement;
    console.log(attrEl)
    attrEl.style.color="blue"
}


component 组件
directive 指令
pipe 管道
ngModule 模块
input 父传子 输入
output 子传父 传出

# 控制器

  • 控制数据从服务器流向ui层？

# ng的指令

Directives是angular的一个核心功能之一。这门技术允许程序员写特定功能的html语义。

  • 组件指令
  • 结构指令
  • 属性指令

# 通信方式

  • input output
  • service

# 模块化

  • NgModule

# 自带的过滤器

  • 货币、日期、filter、json、大小写、数字、排序

# 脏查询

脏值检测的基本原理是存储旧数值，并在进行检测时，把当前时刻的新值和旧值比对。若相等则没有变化，反之则检测到变化，需要更新视图。

  • default
  • onPush策略，就是只有当输入数据的引用发生变化或者有事件触发时，组件才进行变化检测。

# Ng-content有什么功能?

  • 可以允许开发者在自定义的组件中添加自定义的模板内容。

# 路由

  • router的navigate方法

# service

  • Service是Angular中的singleton对象。里面包含了方法和数据, 这些数据会存在于整个程序的生命周期之中。

# Observables和promises的区别是什么？

  • Promises一旦创建，它的执行就会发生。
  • observable是不是这样，它的执行只有在subscription被创建的时候才会触发。
  • Promise只能处理一个事件。Observable是可以处理多个事件

# transpiling

  • 把Typescript转化成JavaScript

# Provider, service和factory的区别是什么?

  • Provider允许你在APP config里面配置你的应用。
  • Service就是用来创建一个服务的。
  • Factory是用来创建和配置服务的。

# AsyncPipe

  • 当observable或promise返回data时，我们使用一个临时属性来保存内容。稍后，我们将相同的内容绑定到模板。通过使用AsyncPipe, promise或observable可以直接在模板中使用，而不需要临时属性。

# component和module的区别？

  • component控制视图（html）.组件之间以及组件和service之间互相交互给app提供功能
  • module是包括一个或多个组件，module不会控制视图（HTML）。module声明了哪些模块可以被其他模块使用，依赖注入了哪些类，以及启动的component，模块来管理组件，使app实现模块化

# ElementRef

  • 操作DOM元素 constructor(myElement: ElementRef) { ... }

# Observable（可观察者）

  • 接受一个Observer作为参数然后返回unsubscribe函数 – 特征： — 是一个函数 — 接受一个Observer对象（包含next、error、complete方法的对象）作为参数 — 返回 unsubscribe 函数，用于取消订阅 – 作用： — 作为生产者和观察者之间的桥梁，并返回一种方法来解除生产者和观察者之间的关系，其中观察者用于处理时间 序列上的数据流。

# Observer (观察者)对象

观察者用来接收可观察者发送过来的消息

 var observer = {     
  next : x => console.log('Observer got a next value' + x),     
  error : err => console.error('Observer got a error:' + err),     complete: () => console.log('Observer got a complete notification') }
//使用
 observable.subscribe(observer);

# Constructor 和 ngOnInit

ngOnInit 是angular中OnInit钩子的实现，用来初始化组件。 ngOnInit : 在angular 第一次显示数据绑定和设置指令、组件的输入属性之后，初始化指令、组件 所以从angular的生命周期看，constructor是执行在先的 所以既然ngOnchanges是输入属性发生变化的时候调用，并且ngOnInit是在ngOnchanges执行之后才调用，而constructor是在组件实例化的时候就调用了，也就是说，在constructor中是取不到输入属性的值的。

constructor 中不适合进行任何和组件通信类似的复杂操作，一般在constructor中进行一些简单的初始化操作，比如依赖注入、变量初始化等。 ngOnInit可以用来初始化组件之间通信的，如异步请求等

# Angular的懒加载

默认情况下，在初始化的时候所有路由都会加载，导致加载缓慢，启动速度慢，所以可以使用懒加载 懒加载 ： 通俗 的讲就是进入主模块之后，子模块不加载，等真正访问到子模块之后，再去加载。使用loadChildren配置路

# 优化

1）考虑AOT编译。 2）确保应用程序已经经过了捆绑，uglify和tree shaking。 3）确保应用程序不存在不必要的import语句。 4）确保应用中已经移除了不使用的第三方库。 5）所有dependencies 和dev-dependencies都是明确分离的。 6）如果应用程序较大时，我会考虑延迟加载而不是完全捆绑的应用程序。

# ContentChild 与 ViewChild

  • 都是属性装饰器
  • 都有对应的复数形式装饰器：ContentChildren、ViewChildren
  • 都支持 Type|Function|string 类型的选择器
  • 不同点
  • ContentChild 用来从通过 Content Projection 方式 (ng-content) 设置的视图中获取匹配的元素
  • ViewChild 用来从模板视图中获取匹配的元素
  • 在父组件的 ngAfterContentInit 生命周期钩子中才能成功获取通过 ContentChild 查询的元素
  • 在父组件的 ngAfterViewInit 生命周期钩子中才能成功获取通过 ViewChild 查询的元素

# 依赖注入

  • 依赖就是具有一系列功能的服务(service)， 应用程序中的各种组件和指令（derictives）可能需要服务的功能。
  • Angular提供了一种平滑的机制，通过它我们可以将这些依赖项注入我们的组件和指令中。因此，我们只是在构建依赖关系，这些依赖关系可以在应用程序的所有组件之间注入。
  • 使用依赖注入还有以下好处，
    • 不需要实例化instantiate，（new 实例）。不需要关心class的构造函数里需要什么参数
    • 一次注入（app module通过Providers注入），所有组件都可以使用。
    • 而且是用同一个service实例（Singleton），也就是说一个service里的数据是共分享的，可以用于组件间数据传递。

# Singleton？

无论我们在什么地方注入我们的service，将永远使用同一个实例。

# aot？

←