Angular2 구성요소 개발 단계에 대한 자세한 설명

이번에는 Angular2 컴포넌트 개발 단계에 대해 자세히 설명하겠습니다. Angular2 개발 컴포넌트의 주의사항은 무엇인가요?

먼저 ng1~ng2 프레임워크에서 구성 요소의 책임과 상태에 대해 간략하게 설명하겠습니다.

ng1의 주요 기능 - 명령은 속성 유형, 레이블 유형, CSS 유형 및 주석 유형으로 구분됩니다. CSS 클래스와 주석으로 작성된 구성 요소는 아마도 대부분의 사람들이 사용하지 않는 반면, 속성 유형 지침과 레이블 유형 지침은 전 세계적으로 ng1의 인기에 기여한 요인 중 하나입니다. ng2에서는 태그형 명령어를 간단하게 분리하고 Vue, 호출된 컴포넌트 등 신흥 세력의 스타일에 따라 업그레이드하고 표시 데이터 및 animation을 포함하여 View(DOM)을 다루는 모든 작업을 처리하는 데 사용됩니다. 속성 지침은 사용자 입력 수신, 사용자 클릭 및 기타 이벤트에 대한 응답 등 구성요소의 기능을 개선하는 데 사용됩니다. 실제로 ng2에 내장된 많은 기능은 속성 기반 명령(ngFor, ngIf 등)이며 구성 요소는 특정 프로젝트에 더 의존하기 때문에 사용자에게 표시되는 인터페이스를 작성하려면 프로젝트 기반 구성 요소를 사용하는 것이 적합합니다. 동시에 구성 요소도 라우팅을 처리해야 합니다. 프런트 엔드 라우팅은 DOM을 동적으로 변경하는 것으로 간주할 수 있습니다. ng2 라우팅에서 규칙을 작성한 후 실제로 프런트 엔드 페이지 전환을 달성하기 위해 다른 구성 요소를 동적으로 렌더링하거나 삭제합니다.

그런 다음 이전 프로젝트에서 ng2 구성 요소를 사용하여 웹 사이트를 구축한 방법에 대해 이야기하겠습니다.

1 공식 관행에 따르면 각 응용 프로그램에는 루트 구성 요소가 있어야 합니다.

2. 프런트 엔드 라우팅을 구별합니다. 각 라우팅 항목은 구성 요소를 가리키고 각 구성 요소는 페이지를 렌더링합니다.

3. 프로젝트가 확장됨에 따라 단일 모듈은 비즈니스 분류를 충족할 수 없으므로 루트 경로는 각 하위 모듈의 지연 로딩을 안내한 다음 하위 모듈의 하위 경로가 특정 하위 구성 요소를 가리킵니다. 각각의 페이지를 렌더링합니다.

4. 단일 하위 구성 요소로 렌더링된 단일 페이지에 초점을 맞추면 실제로 일부 재사용 가능한 태그 블록을 새 구성 요소(예: ngFor 탐색이 필요한 복잡한 데이터 항목)로 캡슐화할 수 있습니다.

5. 일부 구성 요소(예: 측면 버튼 또는 메시지 모달 상자)는 실제로 전체 프로젝트에서 사용될 수 있으며 이러한 구성 요소는 전역적으로 공유되는 구성 요소로 캡슐화되어야 합니다.

아직도 약간 헷갈린다고 생각되는 이유는 아마도 컴포넌트의 이름 때문일 것입니다. 왜냐하면 ng2 프레임워크에서는 라우팅 페이지부터 데이터 항목까지 모든 컴포넌트가 모두 동일한 방식으로 사용되기 때문입니다. 동일한 선언 방법이 지저분해질 것입니다.

컴포넌트를 계속해서 직접 세분화할 수밖에 없어서 작성자는 ng2의 컴포넌트를 4가지 카테고리로 나누었습니다:

페이지 컴포넌트

• 라우팅을 다룰 때 라우팅 규칙과 일치하는 것에만 관심이 있습니다. 인터페이스 렌더링 이 클래스 구성 요소에는 선언 시 선택기 매개 변수가 필요하지 않습니다(경로 위치 지정에만 특정 레이블이 필요하지 않음).

• 라우팅 매개 변수 를 받거나 데이터를 확인하고 다른 비즈니스 상호 작용 요청을 하지 않도록 노력합니다. 입력 및 출력 변수 설정

레이아웃 구성 요소

페이지를 세분화하는 데 사용되는 모듈입니다. 페이지가 단순할 경우 단위 구성 요소를 직접 사용해야 하므로 특정 선택기 매개 변수가 있어야 합니다.
경로 획득에 대한 책임이 없으며 데이터를 요청하지 않고 입력을 통해 데이터를 전달하거나 출력 이벤트에 응답해야 합니다. 가능합니다(페이지 구성 요소에 배치하는 것만큼 복잡하지 않으며 각 레이아웃 구성 요소는 서로 상호 작용할 수 있습니다).

Unit 구성 요소

에는 자체 선택기가 있어야 합니다. 일반적으로 자체 모듈에서 재사용 가능하며 다양한 속성 유형 명령어를 통해 수정됩니다.
단위 수준에서 반복되는 태그를 단순화하는 데 사용됩니다. 예를 들어, 획득된 목록 데이터의 각 데이터 항목에 대한 인터페이스 표시를 단위로 캡슐화할 수 있습니다.
• 공유 구성 요소를 처리하려면

에 선택기가 있어야 합니다. , 전체 프로젝트에서 공유하는 구성 요소로, 비교적 구현이 자유롭고 프로젝트 전반에 걸쳐 중복 코드를 줄이고 유지 관리를 용이하게 하는 데 중점을 둡니다

적절한 예로는 메시지 팝업, 진행률 표시줄 로드 등이 있습니다.

대부분의 속성 기반 명령은 실제로 기능면에서 더 일반적이며 공유 구성 요소와 동일하게 처리될 수 있습니다. 구성 요소에는 특정 보기가 있습니다. 공유 지침은 공통 기능을 구현하는 데만 사용됩니다

사실 기술적인 어려움은 전혀 없으며 단지 한 가지를 의미합니다. 프로젝트 디렉터리 배열이 매우 중요합니다.

ng2는 작성자가 세분화한 다양한 유형의 구성요소를 알지 못합니다. 구체적인 구현은 이 분류 시스템을 기반으로 한 프로젝트 디렉토리 구조입니다.

저자는 폴더 이름 앞에 플러스 기호와 마이너스 기호를 몇 개 추가했는데, 이는 저만의 이상한 디렉토리 구조 배열이라고 볼 수 있습니다.

설명: 가장 바깥쪽 +term은 전체 지연 로딩 모듈의 디렉토리를 나타냅니다. 내부에 더하기 기호가 있는 디렉토리의 구성 요소는 페이지 구성 요소를 나타냅니다. 레이아웃 구성 요소 구성 요소 대표는 단위 구성 요소입니다. 단위 구성 요소는 전체 지연 로딩 모듈에서 사용될 수 있으므로 지연 로딩 디렉터리의 가장 바깥쪽 레이어에 직접 있는 반면 레이아웃 구성 요소는 모두 동일한 레벨 디렉터리에 있습니다. 특정 페이지 구성 요소.

요약하자면, ES6와 TypeScript의 등장을 제쳐두고 ng2컴포넌트의 사용은 기술적으로 어렵지 않다는 것입니다. 물론, 저자의 현재 경험으로는 충분하지 않습니다. 앞으로는 ng2 ​​소스 코드를 개발하고 철저히 연구하여 더 깊은 통찰력을 얻으십시오.

이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 자료:

js는 그림의 균일한 페이드인 및 페이드아웃을 실현합니다.

JS에서 숫자와 문자열을 변환하는 방법

위 내용은 Angular2 구성요소 개발 단계에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!