模块

@NgModule 的设计意图

静态的元数据 (declarations)

运行时的元数据 (providers)

组合与分组 (imports 和 exports)

《angular从零到一》说的简单些：

NgModule是一个装饰器函数，它接收一个用来描述模块属性的元数据对象。其中最重要的属性是：
❑declarations：声明本模块中拥有的视图类。Angular有三种视图类：组件、指令和管道。
❑exports: declarations的子集，可用于其他模块的组件模板。
❑imports：本模块声明的组件模板需要的类所在的其他模块。
❑providers：服务的创建者，并加入到全局服务列表中，可用于应用任何部分。
❑bootstrap：指定应用的主视图（称为根组件），它是所有其他视图的宿主。只有根模块才能设置bootstrap属性

插值表达式

插值是指将表达式嵌入到被标记的文本中。默认情况下，插值使用双花括号 {{ 和 }} 作为定界符。

<p>footer works! {{year}} - {{year + 10}}</p>

组件

组件是Angular应用中最基本的U构造块
组件必须从属于某个 NgModule 才能被其它组件或应用使用
组件在 @NgModule 元数据的 declarations 字段中引用

@Component 元数据

@Component 装饰器会指出紧随其后的那个类是个组件类，并为其指定元数据。

在下面的范例代码中，你可以看到 HeroListComponent 只是一个普通类，完全没有 Angular 特有的标记或语法。 直到给它加上了 @Component 装饰器，它才变成了组件。

组件的元数据告诉 Angular 到哪里获取它需要的主要构造块，以创建和展示这个组件及其视图。具体来说，它把一个模板（无论是直接内联在代码中还是引用的外部文件）和该组件关联起来。该组件及其模板，共同描述了一个视图。

除了包含或指向模板之外，@Component 的元数据还会配置要如何在 HTML 中引用该组件，以及该组件需要哪些服务等等。

下面的例子中就是 HeroListComponent 的基础元数据：

@Component({
  selector:    'app-hero-list',
  templateUrl: './hero-list.component.html',
  providers:  [ HeroService ]
})
export class HeroListComponent implements OnInit {
  /* . . . */
}

在组件的 @Component 装饰器中，添加一个名叫 animations: 的元数据属性。你可以把用来定义动画的触发器放进 animations 元数据属性中。

src/app/app.component.ts

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.css'],
  animations: [
    // animation triggers go here
  ]
})

组件生命周期

ngOnChanges 组件输入属性改变

子组件

scroll-lable-tab.component.html

<ul [ngStyle]="{'background-color': backColor}">

  export class ScrollLableTabComponent implements OnInit,OnChanges{
  selectIndex = -1;
  @Input() menus: TopMenu[] = [];
  @Input() backColor = "#fff";
  @Output() tabSelected = new EventEmitter<TopMenu>();
  handleSelected(index: number){
    this.selectIndex = index;
    this.tabSelected.emit(this.menus[this.selectIndex]);
  }
  ngOnInit(): void {
    console.log("组件初始化");

  }
  ngOnChanges(changes: SimpleChanges): void {
    console.log('组件输入属性改变',changes);
  }
}

父级

app.component.html

  <app-scroll-lable-tab [menus]="topMenus" [backColor]="backColor" (tabSelected)="handleSelectedTab($event)"></app-scroll-lable-tab>

app.component.ts

  backColor = "red";
  handleSelectedTab(topmenu: TopMenu){
    const colors =['red','blue','black'];
    const idx = Math.floor(Math.random()*3);
    this.backColor = colors[idx];
    console.log(topmenu);
  }

ngAfterContentInit 组件内容投影完成时

内容投影

内容投影 是从组件外部导入 HTML 内容，并把它插入在组件模板中指定位置上的一种途径。可以在目标中通过查找下列结构来认出内容投影。

• 元素标签中间的 HTML
• 组件模板中的 <ng-content> 标签

<ng-content> 标签是外来内容的占位符。它告诉 Angular 在哪里插入这些外来内容。在这里，被投影进去的内容就是来自父组件的 <app-child> 标签。

Name	Description
select="selector"	Only select elements from the projected content that match the given CSS selector.``仅从投影内容中选择与给定CSS “selector” 匹配的元素。
	Angular supportsselectors for any combination of tag name, attribute, CSS class, and the :not pseudo-class.``Angular支持对标签名、属性、CSS类和“:not”伪类的任意组合使用[selectors]。

<ng-content select="样式类/HTML标签/指令"></ng-content>
//仅从投影内容中选择与给定 CSS 匹配的元素selector

例子，在 app-scoll-lable-tab 里面加入 div ，这里是不显示的

必须在这个组件加上 <ng-content>

生命周期钩子

1 挂载：

ngOnInit() 、ngAfterContentInit()、 ngAfterViewInit()

2 更新：

ngOnChanges()、ngDoCheck()(不推荐)、ngAfterContentChecked()、ngAfterViewChecked()

3 卸载：

ngOnDestroy()

组件的输入输出

把数据发送到子组件

父组件 @Input 属性绑定

把数据发送到父组件

@Output() 必须是 EventEmitter 类型，它是 @angular/core 中用来发出自定义事件的类。

关于 EventEmitter 的详细信息，请参阅 EventEmitter API 文档。

emit(): 发出包含给定值的事件。

subscribe(): 注册此实例发出的事件的处理器。

事件绑定 (tabSelected)='handleSelectedTab($event)' 会把子组件中的 tabSelected 事件连接到父组件的 handleSelectedTab() 方法。

$event 中包含用户在子组件模板上的 <input> 中键入的数据。

获取DOM对象（组件模板）：1.模板变量

模板变量可以帮助你在模板的另一部分使用这个部分的数据。使用模板变量，你可以执行某些任务，比如响应用户输入或微调应用的表单。

模板变量可以引用这些东西：

• 模板中的 DOM 元素
• 指令或组件
• 来自 ng-template 的 TemplateRef
• Web 组件

语法

在模板中，要使用井号 # 来声明一个模板变量。下列模板变量 #phone 声明了一个名为 phone 的变量，其值为此 <input> 元素

<input #phone placeholder="phone number" />

可以在组件模板中的任何地方引用某个模板变量。这里的 <button> 就引用了 phone 变量。

<input #phone placeholder="phone number" />

<!-- lots of other elements -->

<!-- phone refers to the input element; pass its `value` to an event handler -->
<button type="button" (click)="callPhone(phone.value)">Call</button>

获取DOM对象（组件类）：2.ViewChild

模板在组件类中的引用 @ViewChild

属性装饰器，用于配置一个视图查询。 变更检测器会在视图的 DOM 中查找能匹配上该选择器的第一个元素或指令。 如果视图的 DOM 发生了变化，出现了匹配该选择器的新的子节点，该属性就会被更新

在调用 NgAfterViewInit 回调函数之前就会设置这些视图查询。

元数据属性：

• selector - 用于查询的指令类型或名字。
• read - 从查询到的元素中读取另一个令牌。
• static - 如果为 true，则在变更检测运行之前解析查询结果，如果为 false，则在变更检测之后解析。默认为 false。

1 HTML 中引用（更改dom）

<!-- #后面是给模板或者dom元素起的引用名字，以便可以在组件类或模板中进行引用 -->
<div class="container" #imageSlider>
  <div class="image-slider">
      <img *ngFor="let slider of sliders" [src]="slider.imgUrl" [alt]="slider.caption">
  </div>
  <div class="nav-selection">
      <span *ngFor="let _ of sliders; let idx=index" class="slide-button"></span>
  </div>
</div>

ts

export class ImageSliderComponent implements OnInit{
/** 
   *@ViewChild 是一个选择器，用来查找要引用的 dom元素或者组件
   * ElementRef 是 dom 元素的一个包装类，因为 dom元素不是angular中的类，所以需要一个
   * 包装类以便在 angular中使用和标识其类型
   */
  //  @ViewChild('container') containerRef: ElementRef;
   @ViewChild('imageSlider', { static: true }) imgSlider!: ElementRef;
   @Input() sliders: ImageSlider[] = [];
  ngOnInit(): void {
    console.log(this.imgSlider.nativeElement.innerHTML = '<span>aaa</span>')
  }

}

2  angular组件中引用

效果如下

获取DOM对象（一组组件类）：3.ViewChildren

用于配置视图查询的参数装饰器

用于从视图 DOM 中获取元素或指令的 QueryList。每当添加、删除或移动子元素时，此查询列表都将更新，并且其可观察对象 changes 将发出新值。

在调用 ngAfterViewInit 前设置的视图查询。

元数据属性：

• selector - 要查询的指令类型或名称。

• read - 用于从查询元素中读取不同的标记。

• emitDistinctChangesOnly -仅当 QueryList 结果发生更改时， QueryList#changes observable 才会发出新值。当 false 时，即使 QueryList 没有 changes ，observable 也可能会发出更改。注意：此配置选项已弃用*，它将被永久设置为 true 并在未来版本的 Angular 中删除。

  支持以下选择器。

  • 任何带有 @Component 或 @Directive 装饰器的类
  • 作为字符串的模板引用变量（例如，使用 @ViewChildren('cmp') 查询 <my-component #cmp></my-component> ）
  • 在当前组件的子组件树中定义的任何提供者（例如 @ViewChildren(SomeService) someService!: SomeService ）
  • 通过字符串标记定义的任何提供程序（例如 @ViewChildren('someToken') someTokenVal!: any）
  • TemplateRef （例如使用 @ViewChildren(TemplateRef) template; 查询 <ng-template></ng-template> ；）

此外，多个字符串选择器可以用逗号分隔（例如 @ViewChildren('cmp1,cmp2')）

read 支持以下值：

• 任何带有 @Component 或 @Directive 装饰器的类
• 在此查询的 selector 匹配的组件注入器上定义的任何提供程序
• 通过字符串标记定义的任何提供程序（例如 {provide: 'token', useValue: 'val'}）
• TemplateRef、ElementRef 和 ViewContainerRef

Renderer2

扩展此基类以实现自定义渲染器。默认情况下，Angular 会把模板渲染成 DOM。 你可以使用自定义渲染器来拦截渲染类调用，或用于渲染一些非 DOM 的东西。

说明：

使用 RendererFactory2 创建你的自定义渲染器。

使用自定义渲染器可以绕过 Angular 的模板机制，并进行无法以声明式语法表达的自定义 UI 变更。 比如，如果你要设置无法静态得知名称的 Property 或 Attribute，可以使用 setProperty() 或 setAttribute() 方法。