고급 Angular 구성 요소 패턴 예

Angular가 이제 버전 5.x에 도달했습니다. MVVM 프레임워크의 경우 처음에Angularjs를 접한 후 나중에 React로 전환했습니다. 작업을 변경한 후 프로젝트 기술 스택으로 인해 이전 Anglejs로 전환하여 구현했습니다. 이 과정에서 저는 MVVM 프레임워크 자체의 경우 특히 현재 매우 인기 있는 구성 요소 기반 개발의 경우 사용 수준에서 몇 가지 일반적인 패턴을 마스터하는 것이 필요하다는 것을 점차 깨달았습니다. 이러한 방식으로 우리는 실제 작업에서 어떤 MVVM 프레임워크로든 원활하게(또는 아주 적은 시간과 비용을 들여) 변환하고 절약된 시간을 새로운 지식을 배우는 데 사용할 수 있습니다.

최근 Angular In Depth 블로그를 팔로우하고 있는데 이 시리즈의 글을 가끔 봤는데 퀄리티가 꽤 높다고 느껴져서 시간을 내어 번역해서 여러분과 공유하게 되었습니다. 그리고 각 기사의 마지막 부분에 이를 포함시켰습니다. 다른 사람들에게 영감을 주는 효과를 얻기를 바라면서 제 의견이 틀렸다면 언제든지 의견을 남겨주세요. Angular In Depth的博客，偶尔看到这个系列的文章，觉的质量还挺高，所以抽空余时间翻译并分享给大家，并在每个文章后面加了一点自己的拙见，希望可以达到抛砖引玉的效果，如果观点有误，还望各位看官轻喷。

如Kent C. Dodds Advanced React Component Patterns那样，我们将使用一个相对简单的<toggle>组件来说明这些模式。<toggole>组件的职责是仅仅是管理一个简单的布尔值状态属性: on。使用如此简单的组件进行说明的目的，是因为我们可以将更多的注意力投入到相对组件本身而言较复杂的模式中。

经过这一系列文章，我将提供包含完整功能的、可运行的演示代码链接。你仅仅需要将注意力集中到app文件夹和toggle文件夹。toggle文件夹包含一些可复用的库（一系列组件），当然这个库会随着文章的深入而改变。app文件夹并且特别是app.component.html，将针对库在不同的情形下的使用做出相应的改变。

我们将从最原始的toggle组件版本开始。它仅仅有一个使用了@Input()装饰器的on属性，这个属性所控制的状态代表组件本身的开关状态，同时它还有一个是使用了@Output()装饰器的toggle

Kent C. Dodds Advanced React Component Patterns처럼 비교적 간단한 <toggle> 구성 요소를 사용하여 이러한 패턴을 설명하겠습니다. <toggole> 구성 요소의 역할은 간단한 부울 상태 속성인 on을 관리하는 것뿐입니다. 이러한 간단한 구성 요소를 사용하여 설명하는 목적은 구성 요소 자체보다 더 복잡한 패턴에 더 많은 주의를 기울일 수 있도록 하는 것입니다.

이 기사 시리즈를 통해 모든 기능을 갖춘 실행 가능한 데모 코드에 대한 링크를 제공하겠습니다. app 폴더와 toggle 폴더에만 집중하면 됩니다. toggle 폴더에는 재사용 가능한 라이브러리(일련의 구성요소)가 포함되어 있습니다. 물론 이 라이브러리는 기사가 진행됨에 따라 변경됩니다. app 폴더, 특히 app.comComponent.html은 라이브러리가 다양한 상황에서 사용되는 방식에 따라 수정됩니다.

원래 toggle 구성 요소 버전부터 시작하겠습니다. @Input() 데코레이터를 사용하는 on 속성만 있습니다. 이 속성에 의해 제어되는 상태는 동시에 구성 요소 자체의 스위치 상태를 나타냅니다. @Output() 데코레이터의 toggle 이벤트 이미터를 사용하는 속성이 추가되었습니다. 이 이벤트 이미터는 구성 요소 전환 상태가 변경되면 상위 구성 요소에 알립니다. 관련 권장 사항:

Angular 구성 요소에 외부 스타일을 도입하는 방법

Angular에서 모달 상자를 팝업하는 두 가지 방법

🎜🎜🎜AngularJS 튜토리얼 및 예제 코드 분석🎜🎜

위 내용은 고급 Angular 구성 요소 패턴 예의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!