Angular 2 구성 요소 및 제공자 : 클래스, 공장 및 가치-JS 튜토리얼-php.cn

Angular 2 Components and Providers: Classes, Factories & Values

코어 포인트

Angular 2 구성 요소는 제공자가 사용할 수있는 주사 가능한 객체 세트 인 공급자를 사용할 수 있습니다. 제공자는 Angular 2 의존성 주입 (DI) 시스템의 기초입니다.

제공 업체는 클래스 제공 업체, 공장 제공 업체 및 가치 제공자의 세 가지 유형으로 나눌 수 있습니다. 클래스 제공 업체는 클래스의 인스턴스를 생성하고 공장 제공 업체는 지정된 기능의 반환 값을 생성하고 값 제공 업체는 직접 값을 반환합니다.

Angular의 인젝터는 클래스 제공 업체의 인스턴스를 한 번만 생성하고 동일한 공급자가 사용되는 한 각 후속 주입에 대해 동일한 인스턴스를 수신합니다. 이 기능을 사용하면 하나의 공급자가 생성 한 결과를 제어 할 수있는 유연성과 단일 인스턴스 또는 여러 인스턴스를 사용하는지 여부를 제어 할 수 있습니다.

Angular 2를 사용하면 실제 공급자 ( "토큰")와 관련된 키를 사용하여 제공자를 등록 할 수 있습니다. 이 기능은 구성 요소 코드를 변경하지 않고 서버 호출을하지 않는 모의 클래스를 교체 할 수있는 단위 테스트에 유용합니다.

이전 기사에서는 및

주석을 사용하여 구성 요소 안팎으로 데이터를 전달하는 방법에 대해 논의했습니다. 이 기사에서는 Angular 2 구성 요소의 또 다른 기본 측면을 소개합니다 -

제공 업체 를 사용하는 능력.

구성 요소 구성 속성 목록에서 "제공자"를 보았을 수 있으며 구성 요소에 사용할 수있는 주입 가능한 개체 세트를 정의 할 수 있음을 알 수 있습니다. 이것은 좋지만 물론 "제공자는 무엇입니까?"라는 질문을 제기합니다. 이 질문 에이 질문은 Angular 2의 종속성 주입 (DI) 시스템에 대한 심층적 인 논의가 필요합니다. 우리는 향후 블로그 게시물에서 DI를 구체적으로 다룰 수 있지만 Pascal Precht의 일련의 기사는 여기에서 시작하여 이것을 아주 잘 소개합니다. DI 시스템 (Pascal의 기사에 설명 된대로)이지만 간단히 말해서 DI 시스템은 다음을 담당합니다.

공급자 간의 종속성을 해결합니다. 예를 들어 한 공급자가 다른 공급자가 다른 공급자가 필요한 경우.

공급자의 결과를 요청할 때 제공자의 결과가 코드에서 작동하도록합니다. 이 프로세스 (코드 블록에 제공자 결과를 사용할 수있게 함)를 "주입"이라고합니다. 공급자의 결과를 주입하는 코드를 논리적으로 "인젝터"라고합니다.

인젝터의 계층 구조를 유지하여 구성 요소가 인젝터에서 사용할 수없는 공급자의 제공자 결과를 요청하면 DI가 인젝터의 계층 구조를 검색합니다.

이전 기사에서는 루트 구성 요소로 시작하는 계층 구조를 형성하는 구성 요소를 보여주는 차트가 포함되었습니다. 인젝터와 등록 된 리소스 (제공자)를 포함하도록이 차트를 보완 해 봅시다.

그림 1 : 각 구성 요소에는 공급자를 등록하기위한 자체 인젝터가 있습니다. 인젝터는 서브 injector를 생성하고 제공자에게 로컬 인젝터로 시작하여 인젝터 계층 구조를 검색합니다.

위에서부터 우리는 구성 요소가 하향 방향 그래프를 형성하지만 관련 인젝터가 양방향 관계를 갖는다는 것을 알 수 있습니다. 부모 인젝터는 제공자를 요청할 때, 구성 요소가 요청 된 공급자 인 경우, 부모 인젝터는 하위 인젝터 (하향)를 만듭니다. 자체 인젝터에서 찾을 수있는 Angular 2는 부모 인젝터 (UP)를 검색합니다. 이는 하위 레벨에 동일한 식별자가있는 공급자가 더 높은 수준에서 동일한 이름을 가진 (숨기기) 제공 업체를 덮을 수 있음을 의미합니다.

공급자는 무엇입니까?

그렇다면이 "제공자"는 각 레벨에서 인젝터에 의해 등록 된 것은 무엇입니까? 실제로는 매우 간단합니다. 제공자는 자원 또는 JavaScript를 제공 (생성, 생성)하기위한 각도입니다.

클래스 제공 업체는 클래스의 인스턴스를 생성/제공합니다.

공장 제공 업체는 지정된 기능을 실행할 때 반환 된 컨텐츠를 생성/제공합니다. Angular 2 Components and Providers: Classes, Factories & Values 값 공급자는 결과를 제공하기 위해 이전 두와 같은 조치를 취할 필요가 없으며 값만 반환합니다.

불행히도, "제공자"라는 용어는 때때로 클래스, 기능 또는 값, 그리고 제공자가 생성 한 것, 즉 클래스 인스턴스, 함수의 반환 값 또는 반환 값을 모두 나타냅니다. (애플리케이션에서 사용하려는 인스턴스를 생성하는 간단한 클래스)를 사용하여 클래스 제공 업체를 작성하여 구성 요소에 제공자를 추가 할 수있는 방법을 살펴 보겠습니다.

그림 2 : 네 가지 속성을 가진 간단한 클래스. (Visual Studio Code의 코드 스크린 샷)

좋아요, 이것은 수업입니다. 이제 Angular에게 Class 제공자를 사용하여 클래스 제공 업체를 등록하도록 지시하여 종속성 주입 시스템에 코드에 사용할 인스턴스를 제공하도록 요청할 수 있습니다. 응용 프로그램의 루트 구성 요소로 사용되는 구성 요소

를 생성합니다. 이 구성 요소를 에로드하고 응용 프로그램을 시작합니다. ProvDemo_01.ts bootstrap.ts 그림 3 : 루트 구성 요소를 인스턴스화하는 응용 프로그램의

파일을 시작하십시오.

위의 의미가없는 경우 간단한 Angular 2 응용 프로그램을 구축하는 과정을 다루는 이전 기사를 확인하십시오. 우리의 루트 구성 요소는 이며 저장소에는 여러 다른 버전의 구성 요소가 포함되어 있습니다. 위의 Angular 2 Components and Providers: Classes, Factories & Values 에서 가져온 줄을 업데이트하여 표시된 버전을 변경할 수 있습니다. 루트 구성 요소의 첫 번째 버전은 다음과 같습니다.

그림 4 : import 's bootstrap.ts, 배열에 추가하여 생성자 매개 변수의 유형으로 사용하십시오.

이 구성 요소에

를 추가하는 것은 간단합니다. ProvDemo ProvDemo import

's 속성 Angular 2 Components and Providers: Classes, Factories & Values 에 추가하십시오 생성자에 ""유형의 매개 변수를 추가하십시오

배후에서 각도가 구성 요소를 인스턴스화 할 때 DI 시스템은 제공자를 등록하는 구성 요소에 대한 인젝터를 만듭니다. 그런 다음 Angular는 생성자의 매개 변수 목록에 지정된 유형을보고 새로 등록 된 제공자를 찾아 인스턴스를 생성하는 데 사용한 다음 "MyClass 제공자를 찾고 ""에 할당 할 인스턴스를 생성하는 프로세스는 모두 앵글에 의해 수행됩니다. TypeScript Syntax를 사용하여 검색 할 유형을 이해하지만 Angular의 인젝터는 인스턴스를 찾고 반환 할 책임이 있습니다. CompDemo 위의 관점에서, Angular는 ""배열에서 클래스 목록을 가져 와서 클래스를 검색하기위한 간단한 레지스트리를 만듭니다. 그러나 유연성을 높이기 위해 미묘한 조정이 있습니다. "조정"해야하는 주된 이유 중 하나는 테스트 환경에서 사용하고 싶지 않은 제공 업체가있는 구성 요소의 단위 테스트를 작성하는 데 도움이됩니다. 에 실제 물건을 사용하지 않는 데는 여러 가지 이유가 없지만

가 서버를 호출하여 데이터를 검색하는 경우 테스트 환경에서는 원하거나 할 수 없을 수도 있습니다. 이 문제를 해결하려면 서버 호출을하지 않는 providers의 시뮬레이션을 교체 할 수 있어야합니다. MyClass 우리는 어떻게 교체합니까? 모든 코드를 반복하고 각 MyClass ProvDemo를 변경해야합니까? 이것은 효율적이지 않으며 테스트 작성에 나쁜 패턴입니다. MyClass 우리는

구성 요소 코드를 변경하지 않고 제공자 구현을 교체해야합니다. 이를 달성하기 위해 Angular가 공급자에게 등록 할 때 키 ( "토큰"이라고 함)를 실제 제공자와 연결하기위한 맵을 설정합니다. 위의 예에서, 토큰과 공급자는 동일한 것입니다 :

. 데코레이터에 추가 된 속성은 다음을 위해 축약됩니다. MyClass 이것은 "MyClassMock를 토큰 (키)으로 사용하여 공급자를 찾아 제공자를 로 설정하여 공급자를 요청할 때 종속성 주입 시스템이

인스턴스를 반환합니다."를 의미합니다. 우리 대부분은 키를 숫자 또는 문자열로 취급하는 데 익숙합니다. 그러나이 경우 토큰 (키)은 클래스 자체입니다. 우리는 또한 문자열을 토큰으로 사용하여 제공자를 다음과 같이 등록 할 수 있습니다.

그렇다면 테스트를 수행하는 데 어떻게 도움이됩니까? 이것은 테스트 환경에서 제공자 등록을 무시하고 다음을 효과적으로 수행 할 수 있음을 의미합니다. ProvDemo 이것은 토큰 (키)을 클래스 제공 업체 MyClass와 연관시킵니다. 코드가 DI 시스템이 테스트에 MyClass를 주입하도록 요구하면 인스턴스가 데이터 호출을 위조 할 수 있습니다. 최종 효과는 모든 코드가 동일하게 유지되며 장치 테스트가 테스트 환경에 존재하지 않는 서버를 호출할지 여부에 대해 걱정할 필요가 없다는 것입니다. @Component 비 클래스 공급자를 주입하십시오 providers 위의 우리는 다음 코드를 작성하여 클래스 제공 업체 인스턴스를 생성자에 주입합니다.

typeScript를 사용하면 매개 변수가 유형이어야한다는 것을 지정할 수 있으며, DI 시스템은 작업을 수행하고

<code>providers: [ provide(MyClass, {useClass: MyClass} ]</code>

로그인 후 복사

인스턴스를 제공합니다.

그러나 우리가 클래스 대신 문자열 토큰을 사용하는 경우, 우리는 어떻게 공급자 결과를 주입하도록 angular에 말합니까? 새 값 공급자를 추가하여 문자열 토큰으로 등록하려면 파일을 편집하겠습니다. 값 공급자는 토큰과 관련된 값을 반환하는 공급자 유형입니다. 위의 예에서는 의

속성에 추가하여 앵귤러를 등록하여 제공하지만 부트 스트랩 함수에 전달하여 제공자를 등록 할 수도 있습니다 (동일한 컨텐츠를 bootstrap.ts에 추가 할 수 있습니다. 속성) : @Component providers providers 그림 5 : 값 공급자의

추가.

여기, 우리는 Angular 2 Components and Providers: Classes, Factories & Values 함수를 호출하고 문자열 토큰 ( "

이것은" "가 유형이 아니기 때문입니다. 비 클래스 토큰으로 제공자를 주입 할 수 있도록 Angular는 bootstrap.ts 매개 변수 데코레이터를 제공합니다. 다른 모든 데코레이터와 마찬가지로, 우리는 그것을 가져와야하고, 그것을 사용하여 앵귤러에게 문자열 토큰과 관련된 제공자를 주입하도록 지시합니다. 이렇게하려면 :

를 조정합니다

provide SECURITY_KEY 그림 6 : " 우리는

<code>providers: [ provide(MyClass, {useClass: MyClass} ]</code>

로그인 후 복사

제공자를 사용하여 동일한 구문을 주입 할 수 있습니다 :

좋아, 우리는 제공자를 등록하고 사용하는 방법을 배웠지 만 공급자가 반환하는 것을 살펴 보겠습니다. SECURITY_KEY 제공자 및 싱글 톤 위에서 본 바와 같이, 제공자는 주입 할 물건을 생성 할 책임이 있습니다. 클래스 제공 업체는 인스턴스를 생성하여이를 주입합니다. 그러나 클래스 제공 업체 결과를 주입 할 때마다 새 인스턴스를 얻지 못한다는 것을 이해하는 것이 중요합니다. 대신, DI 시스템은 인스턴스를 한 번 생성하고 캐시를 캐시하며 동일한 공급자를 사용할 때마다 각 후속 주입에 대해 동일한 인스턴스를 수신합니다. @Inject 각 구성 요소에는 자체 인젝터와 자체 등록 제공자가 있기 때문에 마지막 요점은 중요합니다. 는 시간 속성이 현재 시간 (밀리 초)로 설정되어 있으며 매번 동일한 인스턴스를 얻는 지 확인하는 데 도움이되는 임의의 숫자가 있습니다. 응용 프로그램에 구성 요소를 추가합니다. create ProvDemo_02.ts

Angular 2 Components and Providers: Classes, Factories & Values

그림 7 : 생성자에

를 주입합니다. 우리는 MyClass를 가져 와서 생성자 매개 변수 목록에서 유형을 설정하는 데 사용합니다. 중요 : ChildComp imported 의 유일한 목적은 DI 시스템에서 등록 된 공급자를 찾기 위해 사용하는 토큰으로 사용됩니다.

는 자체 제공 업체를 토큰으로 등록하지 않기 때문에 Angular는 인젝터 계층 구조를 찾아 찾을 수 있습니다. 이 작업을 수행하려면 구성 요소에 MyClass를 추가해야합니다. MyClass 그림 8 : ChildComp 's 가 템플릿에 추가되었습니다. ChildComp 우리는 ChildComp를 가져오고 에 ProvDemo에

를 추가하여 구성 요소를 사용하고

요소를 템플릿에 추가합니다. 애플리케이션이 실행될 때 콘솔 출력은 Angular 2 Components and Providers: Classes, Factories & Values 및

모두 동일한 인스턴스를 수신 함을 보여줍니다.

이제 인젝터 제공 업체에 를 추가하려면 ChildComp를 변경합시다. ProvDemo 그림 9 : 자신의 공급자의 정의. ChildComp 우리가 변경하는 유일한 것은 @Component 주석에 directives 속성을 추가하는 것입니다. 물론, 우리는 두 가지 다른 ProvDemo 인스턴스가 만들어 졌음을 알 수 있습니다. ChildComp 이 Angular의 기능은 모든 공급자가 생성 한 결과와 단일 인스턴스 또는 여러 인스턴스를 사용할지 여부에 대한 많은 유연성을 제공합니다. 예를 들어, 구성 요소를 리피터에 넣어 구성 요소를 여러 번 생성 할 수 있습니다. 이 중복 구성 요소가 자체 공급자를 등록하면 각 구성 요소는 고유 한 공급자를 얻게됩니다. 그러나 부모 구성 요소에만 제공자를 등록하면 각 중복 인스턴스는 부모 구성 요소의 제공자를 공유합니다. ChildComp

요약 이 기사에서는 제공자가 무엇인지 정의하고 세 가지 유형의 공급자를 소개합니다. 그런 다음 구성 요소에 대한 제공자를 등록하는 방법과 제공자가 생성 한 결과를 구성 요소에 주입하는 방법을 살펴 보았습니다. 또한 Angular가 인젝터 계층을 사용하여 요청 된 공급자를 찾는 방법을 살펴 보았습니다. Angular는 종속성 주입 시스템의 작동 방식과 제공자를 찾을 위치를 더 잘 통제 할 수 있지만, 위는 Angular 2 응용 프로그램에서 제공자를 만들고 사용하는 데 도움이됩니다.

각도 2 구성 요소, 제공 업체, 클래스, 공장 및 값에 대한 FAQ Angular 2의 클래스와 공장의 차이점은 무엇입니까?

Angular 2에서 클래스는 객체를 만드는 청사진입니다. 데이터와 해당 데이터에서 작동하는 기능을 캡슐화합니다. 반면, 공장은 물체를 만드는 패턴입니다. Angular 2에서 공장은 명시적인 클래스가없는 서비스 또는 값을 생성하고 구성하는 데 사용됩니다. Factory는 컨텍스트 또는 구성에 따라 다양한 클래스의 인스턴스를 생성하는 방법을 제공합니다.

구성 요소와 제공자는 Angular 2에서 어떻게 상호 작용합니까?

Angular 2의 구성 요소와 제공자는 함께 협력하여 동적 및 대화식 사용자 인터페이스를 만듭니다. 구성 요소는 각도 응용 프로그램의 빌딩 블록이며 제공자는 구성 요소가 사용할 수있는 서비스를 만드는 데 사용됩니다. 제공 업체는 구성 요소가 데이터 및 기능을 공유 할 수 있도록하여 응용 프로그램을보다 쉽게 유지하고 업데이트 할 수 있도록합니다.

값은 Angular 2에서 무엇을합니까?

각도 2의 값은 응용 프로그램의 다른 부분에 구성 정보를 제공하는 데 사용됩니다. 컨트롤러, 서비스 및 공장에 주입하여 런타임에 응용 프로그램의 이러한 부분을 구성 할 수 있습니다. 이로 인해 응용 프로그램이보다 유연하고 테스트하기 쉽습니다.

각도 2에서 클래스를 바인딩하는 방법은 무엇입니까?

각도 2의 클래스 결합은 요소에 CSS 클래스를 동적으로 추가하고 제거하는 방법입니다. 표현식이 true로 평가할 때 요소에 추가되는 표현식에 클래스를 바인딩 할 수 있습니다. 표현식이 False로 평가되면 클래스가 삭제됩니다. 이를 통해 동적 및 대화식 사용자 인터페이스를 만들 수 있습니다.

Angular 2의 맥락에서 API는 무엇입니까?

Angular 2의 맥락에서 API (Application Programming Interface)는 소프트웨어 응용 프로그램과 구축하고 상호 작용하는 데 사용되는 일련의 규칙 및 프로토콜입니다. Angular 2는 개발자가 코드와 노력이 적은 복잡한 응용 프로그램을 만들 수있는 풍부한 API를 제공합니다. Angular 2 API에는 구성 요소, 서비스, 지침, 파이프 라인 등을 만드는 기능이 포함되어 있습니다.

Angular 2에서 공장을 사용하는 방법은 무엇입니까?

angular 2의 공장을 사용하려면 먼저 정의해야합니다. 이것은 공장에서 생성하려는 객체를 반환하는 함수를 작성하여 수행됩니다. 그런 다음 메소드를 사용 하여이 공장을 각도 모듈로 등록 할 수 있습니다. 공장이 등록되면 컨트롤러 및 서비스와 같은 응용 프로그램의 다른 부분에 주입 할 수 있습니다.

Angular 2에서 구성 요소를 만드는 방법은 무엇입니까?