Angular 노트 2

핵심 지식인 Angular는 HTML과 TypeScript로 클라이언트 애플리케이션을 구축하는 플랫폼과 프레임워크로 Angular 자체가 TypeScript로 작성된 것이다.이것은 핵심 기능과 선택할 수 있는 기능을 TypeScript 라이브러리로 구성하여 응용 프로그램에 가져올 수 있습니다.구조: 루트 모듈: AppModule 템플릿: HTML과 Angular의 태그(markup)를 조합하여 명령: 프로그램 논리 데이터 귀속을 제공합니다. 속성 귀속(데이터를 HTML에 삽입)과 이벤트 귀속(응답 사용자 작업 업데이트 데이터) 양방향 데이터 귀속: 응답 사용자 작업 업데이트 데이터,HTML에 데이터를 삽입합니다: 표시할 값 서비스 클래스를 변환합니다: 보기와 무관하고 구성 요소가 공유하기를 원하는 데이터나 논리적 의존 주입 처리 (또는 DI, Dependency injection): import에 해당합니다. 의존은 서비스가 아닙니다. 편지나 값일 수도 있습니다.
모듈: xx.module.ts구성:xx.component.ts 서비스: xx.service.ts
{{{xx}}: 플러그인 표현식 [xx]: 속성 귀속 (xx): 이벤트 귀속 [(xx)]: 양방향 귀속 |: 파이프
*ngFor: 반복 명령문, 예: *ngIf: 조건 명령문, 예: 이 명령문은 선택한 영웅이 있는 경우에만 HeroDetail 어셈블리를 포함합니다.
속성 명령어: 템플릿에서 일반적인 HTML 속성처럼 보이기 때문에 '속성 명령어' 라고 합니다.구조 명령: 별표(*) 시작

   $event         
[template](https://angular.cn/api/core/Component#template):  `  
{{values}}
             ，   keyup   ，Angular   $event           DOM     ，               onKey()   。

src/app/keyup.components.ts (class v.1)

export class KeyUpComponent_v1 {
  values = '';

  onKey(event: any) { // without type info
    this.values += event.target.value + ' | ';
  }
}

$이벤트를 전송하는 것은 믿을 수 없는 방법이다. 이벤트 대상을 유형화하는 것은 전체 DOM 이벤트를 방법에 전송하는 것을 반대하는 것이다. 왜냐하면 구성 요소가 템플릿에 대한 정보를 너무 많이 알고 있기 때문이다.알지 말아야 할 HTML의 세부 사항을 더 많이 알고 있을 때만 정보를 추출할 수 있습니다.이것은 템플릿 (사용자가 본 것) 과 구성 요소 (사용자 데이터를 어떻게 처리하는지 응용) 간의 분리 관심 원칙을 위반한다.

              $event       。            keyup   ，            。
src/app/keyup.components.ts (v2)
@Component({
  selector: 'app-key-up2',
  template: `
    
    
{{values}}
  `
})
export class KeyUpComponent_v2 {
  values = '';
  onKey(value: string) {
    this.values += value + ' | ';
  }
}
           ：                 。       $event        。

생명주기 갈고리:ngOnChanges(),ngOnInit(),ngDoCheck(),ngAfterContentInit(),ngAfterContentChecked(),ngAfterViewInit(),ngAfterViewChecked(),ngOnDestroy()
Angular는 *[ngFor](https://angular.cn/api/common/NgForOf) 같은 방식으로 별표 () 문법의 [template](https://angular.cn/api/core/Component#template) 속성을 요소로 변환합니다. *

 ({{i}}) {{hero.name}} 
    
({{i}}) {{hero.name}}
  

`[ngFor](https://angular.cn/api/common/NgForOf)`    *  *              （`
`） ，         ``   。       ，`[[ngClass](https://angular.cn/api/common/NgClass)]="[odd](https://angular.cn/api/common/NgForOfContext#odd)"`     `
`  。

###    [](https://angular.cn/guide/structural-directives#microsyntax "Link to this heading")

Angular            、             。                 ``     ：

*   `let`        [      ](https://angular.cn/guide/structural-directives#template-input-variable)，         。    ，         `hero`、`i`   `[odd](https://angular.cn/api/common/NgForOfContext#odd)`。       `let hero`、`let i`   `let [odd](https://angular.cn/api/common/NgForOfContext#odd)`         `let-hero`、`let-i`   `let-odd`。

*            `of`   `trackby`，        （`of` -> `Of`, `trackBy` -> `TrackBy`），              （`[ngFor](https://angular.cn/api/common/NgForOf)`）  ，         `[ngForOf](https://angular.cn/api/common/NgForOf)`   `[ngForTrackBy](https://angular.cn/api/common/NgForOf#ngForTrackBy)`。      `NgFor`  *    *，           `heroes`，  track-by     `[trackById](https://angular.cn/api/core/IterableChangeRecord#trackById)`。

*   `NgFor`         ，                *   *      。        `index`   `[odd](https://angular.cn/api/common/NgForOfContext#odd)`            `$implicit`（    ）。

*   `let-i`   `let-odd`       `let i=index`   `let [odd](https://angular.cn/api/common/NgForOfContext#odd)=[odd](https://angular.cn/api/common/NgForOfContext#odd)`     。 Angular       *   *     `index`   `[odd](https://angular.cn/api/common/NgForOfContext#odd)`       。

*           `let-hero`       。        。 Angular   `let-hero`          `$implicit`     ，     `NgFor`              。

*   [API     ](https://angular.cn/api/common/NgForOf "API: NgFor")     `NgFor`              。

*   `NgFor`    `[NgForOf](https://angular.cn/api/common/NgForOf)`       。    [NgForOf API     ](https://angular.cn/api/common/NgForOf)    `[NgForOf](https://angular.cn/api/common/NgForOf)`               。