사용자 정의 업로드 구성 요소 버튼 텍스트 : 유연한 매개 변수 전달 체계

이 기사는 각도 업로드 구성 요소에서 버튼 텍스트를 사용자 정의 할 수있는 유연한 방법을 제공하는 것을 목표로합니다. 구성 요소의 입력 속성을 정의하고 버튼의 텍스트 표시에 바인딩함으로써 필요한 텍스트를 부모 구성 요소에서 쉽게 전달하여 구성 요소 재사용 성과 구성 가능성을 가능하게 할 수 있습니다. 이 메소드는 글로벌 구성 요소 코드를 직접 수정하지 않으므로 구성 요소가 다른 시나리오에서 다른 텍스트 요구에 적응할 수 있습니다.

각도 프로젝트에는 구성 요소를 재사용 해야하는 경우가 종종 있지만 때로는 다른 사용 시나리오에 따라 구성 요소의 일부를 사용자 정의해야합니다. 예를 들어, 버튼의 텍스트를 특정 비즈니스 요구에 따라 변경 해야하는 공통 업로드 구성 요소. 구성 요소 내부의 코드가 직접 수정되면 구성 요소의 보편성과 유지 관리 가능성이 줄어 듭니다. 이 기사는 입력 속성을 정의하여 구성 요소의 버튼 텍스트 표시를 유연하게 제어하는 ​​방법을 소개합니다.

구현 방법

핵심 아이디어는 업로드 구성 요소의 입력 속성 (@input ())을 정의하여 부모 구성 요소가 전달한 버튼 텍스트를 수신하는 것입니다. 그런 다음 입력 속성을 버튼의 텍스트 표시에 바인딩하십시오.

1. 업로드 구성 요소를 수정합니다 (uploader.component.ts)

먼저 UploaderComponent 클래스에 ButtonText라는 입력 속성을 추가하고 "제출"과 같은 기본값을 설정하십시오.

 '@Angular/Core'에서 {component, input} 가져 오기;

@요소({
  선택기 : 'App-uploader',
  TemplateUrl : './uploader.component.html',
  StyleUrls : [ './uploader.component.scss']
})
수출 클래스 업 로더 컴퓨터 {
  @Input () ButtonText : String = '제출'; // 기본값은 "제출"입니다.

  생성자 () {}

  // ...
}

2. 구성 요소 템플릿 업로드 수정 (uploader.component.html)

그런 다음 업 로더.component.html 파일을 수정하고 버튼의 텍스트 내용을 ButtonText 속성에 바인딩하십시오.

 
    {{buttonText}}
 버튼>

버튼의 텍스트는 이제 ButtonText 속성의 값을 표시합니다.

3. 부모 구성 요소에서 업로드 구성 요소를 사용하십시오

업로드 구성 요소를 사용해야하는 상위 구성 요소에서 ButtonText 속성을 바인딩하여 사용자 정의 버튼 텍스트를 전달할 수 있습니다.

 <app-uploader event> </app-uploader>

이 예에서는 업로드 구성 요소의 버튼 텍스트가 "파일 업로드"로 설정됩니다.

샘플 코드 요약

• 업 로더.component.ts :

 '@Angular/Core'에서 {component, input} 가져 오기;

@요소({
  선택기 : 'App-uploader',
  TemplateUrl : './uploader.component.html',
  StyleUrls : [ './uploader.component.scss']
})
수출 클래스 업 로더 컴퓨터 {
  @Input () ButtonText : String = '제출';

  생성자 () {}

  // ...
}

• 업 로더.component.html :

 
    {{buttonText}}
 버튼>

• 부모 구성 요소 사용의 예 :

 <app-uploader event> </app-uploader>

주목해야 할 것

• ButtonText 속성이 상위 구성 요소에 올바르게 바인딩되어 있는지 확인하십시오.
• 버튼 텍스트의 기본값은 매개 변수가 전달되지 않으면 기본 텍스트를 표시하기 위해 필요에 따라 설정할 수 있습니다.
• 구성 요소 내부에서 ButtonText 값을 수정 해야하는 경우 양방향 바인딩 [(ButtonText)] = "MyButtonText"를 사용할 수 있습니다.

요약

입력 속성을 사용하면 구성 요소의 내부 코드를 수정하지 않고도 각도 구성 요소의 다양한 측면을 쉽게 사용자 정의 할 수 있습니다. 이 방법은 구성 요소의 재사용 성과 유연성을 향상시켜 구성 요소가 다양한 응용 프로그램 시나리오에 더 잘 적응할 수 있도록합니다. 실제 개발에서 더 많은 입력 속성을보다 세분화 된 구성 요소 사용자 정의를 달성하기 위해 필요에 따라 정의 될 수 있습니다. 이 방법은 버튼 텍스트를 사용자 정의하는 데 적합 할뿐만 아니라 다른 시나리오에 따라 조정 해야하는 다른 구성 요소 속성에도 적합합니다.

위 내용은 사용자 정의 업로드 구성 요소 버튼 텍스트 : 유연한 매개 변수 전달 체계의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!