컴포넌트의 템플릿이 항상 고정되는 것은 아닙니다. 앱이 런타임 중에 새로운 컴포넌트를 불러와야 할 수도 있습니다.
사용 시나리오:
1. 페이지 로딩은 서로 다른 매개변수에 따라 다양한 구성 요소를 로드하여 서로 다른 효과를 보입니다
2. 페이지는 여러 요소로 구성되어 있으며, 모두 처음에 표시할 필요는 없으며, 탭 탭, 동적 팝업 모달 박스 등 사용자가 클릭한 후 특정 정보가 표시됩니다.
이 글의 사용 시나리오는 2, 상상해 보세요,동적 로딩을 사용하지 않으면, 메인 인터페이스를 열 때 페이지의 숨겨진 모든 구성 요소가 로드되고, 모든 구성 요소가 해당 인터페이스 서비스를 호출하기 때문에 모든 정보를 볼 필요가 없어 자원 낭비가 될 수 있고, 메인 인터페이스가 느리게 로드되어 사용자 경험에 영향을 줄 수 있습니다。
ng 단위로 부품을 동적으로 적재하는 방법은 두 가지가 있습니다:
이미 선언된 컴포넌트 로드: ComponentFactoryResolver를 사용해 컴포넌트 인스턴스를 다른 컴포넌트 뷰로 렌더링합니다;
컴포넌트를 동적으로 생성하고 로드하세요: 컴포넌트를 생성하고 렌더링할 때 ComponentFactory와 컴파일러를 사용하세요
우리의 필요에 따라 개별 구성 요소는 미리 개발되어 동일한 구성 요소에 표시되어야 합니다. 그래서 첫 번째 방법이 우리의 요구를 충족합니다.
ComponentFactoryResolver를 사용해 컴포넌트를 동적으로 로드하려면 다음 개념들을 이해해야 합니다:
- ViewChild: 뷰에 해당 요소를 추가할 수 있는 부동산 장식 프로그램;
- ViewContainerRef: 컴포넌트를 생성하고 삭제할 수 있는 뷰 컨테이너;
- ComponentFactoryResolver: 한 컴포넌트를 다른 뷰에서 렌더링할 수 있는 컴포넌트 파서입니다.
먼저, 렌더링을 살펴보고, modal1 버튼을 클릭해 modal1 컴포넌트를 동적으로 로드하고, modal2 버튼을 클릭해 modal2 컴포넌트를 동적으로 로드하세요.
먼저, 각진 프로젝트를 만듭니다.
인덱스, 모달1, 모달2, 모달3 4개의 컴포넌트를 만들고, 그중 모달1과 모달2가 동적으로 로드된 컴포넌트입니다.
지수 성분
HTML:
TS:
Modal1 컴포넌트
HTML:
TS:
Modal2 컴포넌트
HTML:
TS:
Modal3 컴포넌트
HTML:
TS:
우리는 3가지 모달의 컨스트럭터에 그들의 이름을 출력했습니다.
Modal1과 Modal2는 모두 동적으로 로드되며, 버튼을 클릭해 로드할 때만 실행 생성자가 트리거됩니다. Modal3는 동적 로드를 사용하지 않으며, 부모 인터페이스가 로드된 후 Modal3 인터페이스 생성자가 즉시 실행됩니다.
이렇게 하면 동적 로딩의 장점을 확인할 수 있고, 사용하지 않으면 로딩이 되지 않는데, 이는 C#의 게으른 로딩과 비슷합니다.
소스 코드 다운로드:
관광객 여러분, 이 게시물의 숨겨진 내용을 보고 싶으시다면 부탁드립니다 회답
리소스:하이퍼링크 로그인이 보입니다.
| 
게시됨 2020. 5. 29. 오후 4:40:00
|
|
|
|
집주인|
게시됨 2021. 2. 2. 오후 1:56:30
|
게시됨 2022. 10. 26. 오후 5:27:19
|
