2016-11-23 3 views
-1

각 2 개의 내부 구성 요소 및 동작을 연구 중이며 구성 요소 트리 관리와 관련하여 몇 가지 질문을하고 있습니다.각 2 및 구성 요소 트리

구성 요소를 기반으로하는 웹 응용 프로그램에는 구성 요소 트리가 있다는 것이 확실합니다. 하나의 구성 요소는 위에서 아래로 또 다른 구성 요소로 구성되며 실제로 강력합니다.

enter image description here

그러나 지금, 나는이 내부적으로이 구성 요소 트리의 표현을 각 관리 않습니다 궁금 해요?


나는 우리가 구성 요소는 템플릿에 제외하고 그것을, 의 내부에 무슨, 각도 요소에서 말을 결코가 무엇을 의미.


예를 들어, 나는 그것이 PrestaCardComponent 소유 내 HomeComponent 정의에 말하지 않을 :

내 템플릿에서 제외
import { Component, OnInit, Inject } from '@angular/core'; 

@Component({ 
    selector: 'app-home', 
    templateUrl: './home.component.html', 
    styleUrls: ['./home.component.css'] 
}) 
export class HomeComponent implements OnInit { 

    prestations: Array<any>; 
    featurettes: Array<any>; 
    constructor(@Inject('AppStore') private appStore: any) { 
     this.prestations = []; 
     this.featurettes = []; 
    } 

    ngOnInit() { 

    } 

} 

:

<div *ngFor="let prestation of prestations" class="col-md-4 m-b"> 
       <app-presta-card [title]="prestation.title" [content]="prestation.content" [image]="prestation.image"></app-presta-card> 
      </div> 

내가 그것을 의미하는 것을 의미한다.

이것은 Angular 2가 다른 템플릿을 읽음으로써 가상 컴포넌트 트리을 생성 할 수 있다는 것을 의미합니다.

어떻게 가능합니까? 어떻게 작동합니까?

답변

2

enter image description here

사용 전조. 당신은 명확한 통찰력을 얻을 것입니다.

+0

내가 알고 싶은 것은 각도 2가 html 템플릿을 기반으로 내부 구성 요소 트리를 만드는 방법입니다. 내부에서, augury에서의 진정한 표현이 아닙니다. DOM의 컴포넌트 트리와 Augury가 제공 한 표현 사이의 중간 과정을 배우고 싶었습니다. 하지만 대답 주셔서 감사합니다 :) – mfrachet

1

NgModules은 Angular가 템플릿을 구문 분석 할 때 템플릿을 해독하는 방법을 이해하는 데 중요합니다.

선언, @NgModule로 장식하면서 이러한 속성의 definition로 봐 :이 모듈에 속하는 구성 요소, 지침 및 파이프의 목록입니다.

수입품 :이 모듈로 가져올 모듈 목록. 가져온 모듈의 모든 것을이 모듈의 선언에 사용할 수 있습니다.

:이 모듈을 가져 오는 모듈에서 볼 수있는 구성 요소, 지시문 및 파이프 목록.

Angular는 어떤 선택기가 무엇을 의미하는지 알고 Reflection을 사용하여 구성 요소에 대한 메타 데이터를 가져옵니다.

물론 더 많은 내용이 있지만 시작일 수 있습니다.

희망이 도움이됩니다!

1

구성 요소의 구성은 모두 NgModule에 있습니다. 마두 란잔으로

는 이미 다음 3 중요한 부분, 즉되고, NgModule에있다 그의 대답에 언급 된이 모듈에 속하는 구성 요소, 지침 및 파이프 목록 :

선언합니다.

수입품 :이 모듈로 가져올 모듈 목록. 가져온 모듈의 모든 것을이 모듈의 선언에 사용할 수 있습니다.

:이 모듈을 가져 오는 모듈에서 볼 수있는 구성 요소, 지시문 및 파이프 목록.

실제로 생각해 보면 RC5 이후로 angular2 아키텍처의 주요 변경 사항 이었으므로 NgModule의 경우에도 FAQ이 있습니다.

각 구성 요소는 모두 NgModule의 일부 여야합니다. 어떤 기능이 서로 속해 있는지 애플리케이션의 일부를 선언합니다. 심지어 수입품 인을 사용하여 서로 내부에 NgModules를 중첩 할 수 있습니다.

긍정적 인 부분은 각 각 모듈이 자체 라우팅 구성을 가지고 있으므로이 구조로 애플리케이션을 잘 구성 할 수 있다는 것입니다.

또한 예를 들어 내부에서 선언 할 때 사용할 서비스의 액세스 가능성을 제한 할 수 있습니다. 몇 가지 중요한 기능을 명명하기 위해 다른 모듈의 (하위) 모듈.

자세한 내용은 Angular2 Docs을 확인하십시오. 각도 팀이 최신 정보를 유지하고 깨끗하게 유지하려고 노력했기 때문에 매우 상세하고 IMO가 매우 이해하기 쉽습니다 (주제 그룹이 다소 엉터리 인만큼 필요한 부분을 조금만 검색해도 상관 없습니다). docs).

+0

그래, 내가 모듈에 관한있어. 내가 찾고있는 건 템플릿 파싱에 관한 반사성과 내부 트리를 만들기 위해 구성 요소의 템플릿을 읽는 각도 기능이다. 하지만 당신의 대답은 정말 재미 있습니다. – mfrachet