Angular 4 구성 요소 이름 에 따라 동적 으로 구성 요 소 를 만 드 는 방법 튜 토리 얼

1.각도 구성 요소 이해
구성 요 소 는 더욱 간단 한 설정 항목 을 사용 하여 구성 요 소 를 기반 으로 하 는 응용 프로그램 구 조 를 구축 하 는 특수 한 명령 입 니 다.그러면 그 는 app 을 간단하게 쓸 수 있 고 비슷 한 웹 Component 나 angular 2 스타일 을 사용 할 수 있 습 니 다.웹 Component 는 규범 입 니 다.곧 기준 이 될 거 야.
응용 구성 요소 의 장점:

일반 명령 설정 보다 더 간단 합 니 다

더 좋 은 기본 설정 과 가장 좋 은 실천 을 제공 합 니 다

은 구성 을 바탕 으로 하 는 응용 구조 에 더욱 최적화 되 었 다.

쌍 의 angular 2 업그레이드 가 더욱 부 드 럽 습 니 다.

구성 되 지 않 은 경우:

컴 파일 이나 pre-link 단계 에서 작업 을 수행 할 명령 에 대해 서 는 구성 요 소 를 사용 할 수 없습니다.그 단계 에 도달 할 수 없 기 때 문 입 니 다.

명령 의 priority,terminal,multi-element 를 정의 하려 면 사용 할 수 없습니다.

구성 요 소 는 요소 태그 로 만 실행 할 수 있 고 다른 것 은 명령 으로 만 사용 할 수 있 습 니 다.

2.동적 생 성 구성 요소

장면 에 대해 말씀 드 리 겠 습 니 다.저 보다 구성 요 소 를 썼 습 니 다.이 구성 요 소 는 내용 이 적 습 니 다.팝 업 대화 상 자 는 한 줄 의 데이터 만 있 을 수도 있 고 폼 등 일 수도 있 습 니 다.또는 여러 가지 선택,선택 한 옵션 등 이 있 습 니 다.

인터넷 에는 동적 으로 구성 요 소 를 만 드 는 데모 가 많 습 니 다.모두 만 족 스 럽 지 않 습 니 다.원 하 는 것 은 동적 으로 구성 요 소 를 만 들 때 들 어 올 구성 요소 대상 을 들 어가 서 이 를 페이지 에 표시 하 는 것 입 니 다.이게 무슨 동적 생 성 이 야?구성 요소 의 이름 을 전하 고 싶 어서 만 들 수 있어.

전에 C\#동적 생 성 클래스 를 쓴 적 이 있 습 니 다.모두 하나의 클래스 의 이름 을 준 다음 에 반 사 를 통 해 클래스 를 만 든 다음 에 인터페이스 필 터 를 통 해 인터페이스 호출 방법 으로 전환 하거나 invoke 의 특정한 방법 등 으로 조작 할 수 있 습 니 다.이런 게 내 가 원 하 는 효과 야.

이름 을 주 고 이 구성 요 소 를 만 듭 니 다.일부 파 라 메 터 를 입력 하여 만 든 구성 요 소 를 할당 하고 일부 파 라 메 터 를 출력 합 니 다.(주 는 출력 이 이벤트 입 니 다.구성 요소 의 단 추 를 누 르 면 해당 하 는 이벤트 가 발생 합 니 다.)

이렇게 많아

위의 그 그림 은 매우 간단 하 다.바로 텍스트 를 입력 하 는 탄 상자 이다.
다음은 이게 좀 복잡 해 요.데이터 전송,이벤트 귀속 등 이 있어 요.

주 님 은 호출 하기에 편리 합 니 다.저 는 이것들 을 모두 하나의 방법 으로 포장 하 였 습 니 다.세 개의 매개 변수 입 니 다.

만 들 구성 요소 이름

구성 요소 에 들 어 갈 인자

구성 요소 출력 이벤트


 Utility.$ShowDialogComponent('ComponentName', {
  Params1,Params2...
 }, {
  onEventName1:()=>{},
  ...
 });

내 가 동적 으로 만 든 구성 요 소 는 모두 탄 상자 형식 으로 나 오기 때문에 나 는 동적 으로 만 든 절 차 를 탄 상자 구성 요소 에 넣 었 다.
Dialog.ts,파일 생 성,


@Component({
 selector: 'xtn-mode-dialog',
 templateUrl: './Dialog.html',
 styleUrls: ['./Dialog.scss'],
 animations: [ //            ，      ，    ，         。
 trigger('TriggerState', [
  state('inactive', style({ transform: 'scale(0.1)' })),
  state('active', style({ transform: 'scale(1)' })),
  transition('inactive => active', animate('150ms ease-in')),
  transition('active => inactive', animate('150ms ease-out')),
 ])
 ]
})
export class XtnDialog implements OnInit, OnDestroy, OnChanges, AfterContentChecked, AfterContentInit {
 //               
 constructor(private resolver: ComponentFactoryResolver) {
 }
 //     ，              。
 ngAfterContentChecked(): void {}
 //     
 ngOnDestroy(): void {}
 //               
 LoadComponent(self:any){}
 ngAfterContentInit(): void {}
 ....
}

코드 를 붙 이지 않 겠 습 니 다.모든 코드 를 보면 여 기 를 클릭 하 세 요. 에서 몇 가지 방법 을 보 여 드릴 수 있 습 니 다.구체 적 인 정 보 는 클릭 할 수 있 습 니 다.
총결산
이상 은 이 글 의 전체 내용 입 니 다.본 논문 의 내용 이 여러분 의 학습 이나 업무 에 어느 정도 참고 학습 가치 가 있 기 를 바 랍 니 다.궁금 한 점 이 있 으 시 면 댓 글 을 남 겨 주 셔 서 저희 에 대한 지지 에 감 사 드 립 니 다.

이 내용에 흥미가 있습니까?

현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:

angular 4 의 rollup

1 、 우선 AOT 홈 페이지 예 https://www.angular.cn/docs/ts/latest/cookbook/aot-compiler.html 주의 하 다. 이런 방식 은 require 가 아니다. 나중에 자...

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.

Angular 4 구성 요소 이름 에 따라 동적 으로 구성 요 소 를 만 드 는 방법 튜 토리 얼

좋은 웹페이지 즐겨찾기