품질 각도 1.5 구성 요소 구축 가이드

키 포인트

구성 요소 격리 : 커플 링을 최소화하고, 캡슐화를 향상시키고, 내부 논리를 개인을 유지하며, 다른 구성 요소와의 상호 작용을 제어합니다. <:> 구성 요소 초점 : 각 구성 요소는 단일 책임에 중점을 두어 단순성을 유지하면서 테스트 가능성과 재사용 성을 향상시킵니다.

일원 바인딩 : 다이제스트 사이클 하중을 줄이고 외부 간섭없이 데이터가 구성 요소로 흐르도록하여 성능 및 설계 명확성을 향상시킵니다.

<:> 단일 바인딩 : 다이제스트주기에서 관찰자 수를 줄임으로써 성능을 추가로 최적화합니다. 이는 정적 또는 불변 데이터에 특히 유용합니다.
• <:> 수명주기 이벤트 : 및 와 같은 수명주기 이벤트를 사용하여 구성 요소의 설정 및 분해를 효과적으로 관리하여 리소스가 올바르게 초기화되고 청소되도록합니다.
구성 요소 이벤트 : 구성 요소는 각도 2 관행과 일치하고 구성 요소의 모듈성 및 재사용 성을 향상시키는
• 가 아닌 사용자 정의 이벤트와 상호 작용하는 것을 선호하는 다른 구성 요소와 통신하기위한 이벤트를 발급해야합니다.
• 이 기사는 Mark Brown과 Jurgen van de Moere가 검토했습니다. Sitepoint 컨텐츠를 최대한 활용 한 Sitepoint의 모든 동료 검토 자에게 감사합니다!
• 2017 년 1 월 10 일 :이 기사는 일원 바인딩에 관한 섹션을 업데이트하고 단일 시간 바인딩에 대한 추가 정보를 명확히했습니다. ---- <.> 각도 1에서 구성 요소는 사용자 정의 HTML 요소를 만드는 메커니즘입니다. 이 과거에는 Angular Directives가 포함되어 있었지만 구성 요소는 각도 및 구축 및 설계에 대한 모범 사례를 시행하는 다양한 개선을 기반으로했습니다. $onInit 이 기사에서는 구성 요소의 설계와 응용 프로그램에서이를 사용하는 방법에 대해 다이빙 할 것입니다. Angular 1에서 구성 요소를 사용하지 않았다면 구문 및 디자인에 대한 최근 자습서를 읽을 수 있습니다. 저의 목표는 응용 프로그램의 품질을 향상시킬 몇 가지 모범 사례를 간략하게 설명하는 것입니다. $onDestroy 또한 Angular 2에 대한 많은 모범 사례가 새로운 구성 요소 API를 통해 Angular 1에 도입되었으므로 나중에 리팩토링하기 쉬운 응용 프로그램을 구축 할 수 있습니다. Angular 2는 우리가 생각하고 Angular 1 구성 요소를 설계하는 방식에 영향을 미치지 만 여전히 명백한 차이가 많이 있습니다. Angular 1은 여전히 ​​응용 프로그램을 구축하기위한 매우 강력한 도구이므로 Angular 2로 이동하지 않거나 마이그레이션 할 준비가되지 않더라도 구성 요소를 사용하여 응용 프로그램을 개선하는 데 투자 할 가치가 있다고 생각합니다.
좋은 구성 요소는 무엇입니까?
• 구성 요소는 응용 프로그램을위한 강력한 빌딩 블록으로 만들기 위해 많은 주요 기능을 염두에두고 설계해야합니다. 각 기능을보다 자세히 살펴 보지만 구성 요소가 따라야 할 주요 개념이 있습니다. $scope
  분리 : 구성 요소의 논리는 캡슐화되어 내부 및 개인을 유지해야합니다. 이는 구성 요소 간의 커플 링을 줄이는 데 도움이됩니다.
  • 초점 : 구성 요소는 단일 장치로서 주요 작업을 수행해야하므로 이해하기 쉽고 종종 재사용이 쉬워집니다.
  일원 바인딩 : 가능할 때마다 일원 결합을 사용하여 다이제스트 사이클에서 하중을 줄입니다.
  • 수명주기 이벤트 사용 : 구성 요소의 수명주기는 인스턴스화로 시작하여 페이지에서 제거되면 끝납니다. 이러한 이벤트를 사용하여 구성 요소를 유지하는 것이 가장 좋습니다.
  알 수없는 API : 구성 요소는 구성 방법을 일관된 방식으로 속성으로 수락하여 사용 방법을 쉽게 이해할 수 있도록해야합니다.
  • 이벤트 발행 : 다른 구성 요소와 의사 소통하기 위해 적절한 이름과 데이터로 이벤트를 발행해야합니다.
  • 이제 먼저 응용 프로그램의 나머지 부분에서 구성 요소를 분리하고 캡슐화하는 이유와 방법을 먼저 이해하겠습니다.
  구성 요소는 분리되어야합니다 각도 1 기능의 진화는 정당한 이유로 분리 및 캡슐화 된 구성 요소를 활성화하는 것입니다. 일부 초기 응용 프로그램은
  • 및 중첩 컨트롤러의 사용과 크게 결합되었습니다. 처음에 Angular는 해결책을 제공하지 않았지만 이제는 해결책이 있습니다.
  좋은 구성 요소는 내부 논리를 노출시키지 않습니다. 이것은 설계된 방식으로 인해 달성하기 쉽습니다. 그러나 절대적으로 필요한 경우 (예 : Send/Broadcast 이벤트), 구성 요소 사용
  • 남용을 피해야합니다.
  구성 요소는 에 중점을 두어야합니다 구성 요소는 단일 역할을 가정해야합니다. 이것은 테스트 가능성, 재사용 성 및 단순성에 매우 중요합니다. 개별 구성 요소를 과부하시키는 대신 추가 구성 요소를 만드는 것이 좋습니다. 그렇다고해서 더 크거나 복잡한 구성 요소가 없다는 것을 의미하지는 않지만 각 구성 요소가 주요 작업에 집중해야 함을 의미합니다.
  나는 구성 요소를 응용 프로그램에서 자신의 역할을 기반으로 구성 요소를 4 개의 주요 그룹으로 나누어 구성 요소를 설계하는 방법에 대해 생각할 수 있도록 도와줍니다. 이러한 다른 유형의 구성 요소를 구축하는 데 다른 구문은 없습니다. 구성 요소가 가정하는 특정 역할을 고려하십시오.

  이 유형은 Angular를 사용한 5 년 이상의 경험을 기반으로합니다. 약간 다르게 구성하도록 선택할 수 있지만 기본 개념은 구성 요소가 명확한 역할을하도록하는 것입니다.

  애플리케이션 구성 요소

  하나의 응용 프로그램 구성 요소 만 응용 프로그램의 루트 역할을 할 수 있습니다. 다른 모든 논리가로드되는 웹 응용 프로그램 본문에 구성 요소가 하나만 있다고 생각할 수 있습니다.

  이것은 주로 Angular 2 설계 일관성에 권장되므로 마이그레이션하려면 향후 더 쉬울 것입니다. 또한 응용 프로그램의 모든 루트 내용을 단일 구성 요소로 이동하여 테스트하는 데 도움이됩니다 (일부는 index.html 파일에 포함하지 않고). 애플리케이션 구성 요소는 응용 프로그램을 인스턴스화 할 수있는 장소를 제공하므로 응용 프로그램 실행 방법에서이를 수행 할 필요가 없으므로 테스트 가능성을 향상시키고 $scope에 대한 의존성을 줄입니다.

  이 구성 요소는 가능한 한 간단해야합니다. 가능하면 바인딩이나 컨트롤러가없는 템플릿 만 포함 할 수 있습니다. 그러나

  를 대체하거나 응용 프로그램 요구를 부팅하지 않습니다. $scope 라우팅 구성 요소

  과거에는 UI-Router 상태 (또는 Ngroute 라우팅)의 컨트롤러와 템플릿을 연결했습니다. 경로는 이제 구성 요소에 직접 연결될 수 있으므로 구성 요소는 여전히 컨트롤러와 템플릿 쌍이있는 곳이지만 라우팅 가능의 장점도 있습니다.

  예를 들어 UI-Router를 사용하는 것은 템플릿과 컨트롤러를 연결하는 방법입니다.
  이제 URL을 구성 요소에 직접 연결할 수 있습니다.
  이러한 구성 요소는 프로젝트 ID와 같은 라우팅 매개 변수의 데이터를 바인딩 할 수 있으며, 해당 역할은 필요한 다른 구성 요소로드하기 위해 라우팅 설정에 중점을 두는 것입니다. 라우팅 정의에 대한이 작은 변화는 실제로 각도 2 마이그레이션 기능에 매우 중요하지만, 구성 요소 수준에서 템플릿과 컨트롤러를 더 잘 캡슐화하기 때문에 각도 1.5에서도 중요합니다.

  <code>>
    <app>></app>>
  >
  </code>

  Angular 1에는 실제로 Ngroute와 Ngcomponentrouter의 두 개의 라우팅 모듈이 있습니다. ngcomponentrouter만이 구성 요소를 지원하지만 더 이상 사용되지 않습니다. 가장 좋은 방법은 UI-Router를 사용하는 것입니다.

  <code>$stateProvider.state('mystate', {
    url: '/',
    templateUrl: 'views/mystate.html',
    controller: MyStateController
  });
  </code>

  상태 구성 요소

  응용 프로그램을 위해 구축 한 유일한 구성 요소의 대부분은 상태가 적합합니다. 여기에 실제로 응용 프로그램 비즈니스 로직, HTTP 요청, 프로세스 양식 및 기타 상태의 작업을 발행합니다. 이러한 구성 요소는 응용 프로그램에 고유 할 수 있으며 시각적 렌더링보다는 데이터를 유지하는 데 중점을 둡니다.

  디스플레이 용 컨트롤러로드 사용자 프로필 데이터가 있다고 가정하고 지침에 함께 연결된 해당 템플릿 (여기에 표시되지 않음)도 있다고 가정합니다. 이 코드 스 니펫은 아마도 작업을 수행하는 가장 기본적인 컨트롤러 일 것입니다.

  구성 요소를 사용하면 이전보다 더 잘 설계 할 수 있습니다. 이상적으로는 컨트롤러에서 직접

  를 사용하는 대신 서비스를 사용해야합니다.

  이제 자체 데이터를로드하는 구성 요소가 있으므로 상태가됩니다. 이러한 유형의 구성 요소는 단일 경로에 링크하는 데 사용되지 않을 수 있다는 점을 제외하고 라우팅 구성 요소와 유사합니다.

  상태가 완성 된 구성 요소는 다른 (상태 부족) 구성 요소를 사용하여 실제로 UI를 렌더링합니다. 또한 데이터 액세스 로직을 컨트롤러에 직접 넣는 대신 서비스를 사용하려고합니다.

  무국적 구성 요소

  무국적 구성 요소는 비즈니스 로직을 관리하지 않고 렌더링에 중점을두고 특정 응용 프로그램에 고유 할 필요는 없습니다. 예를 들어, 양식 컨트롤, 카드 등과 같은 UI 요소에 사용되는 대부분의 구성 요소는 데이터로드 또는 저장 양식과 같은 논리를 처리하지 않습니다. 그들은 모듈 식이고 재사용 가능하며 분리되도록 설계되었습니다.

  무국적 구성 요소가 제어 템플릿에 데이터 또는 모든 것을 표시하는 경우 컨트롤러가 필요하지 않을 수 있습니다. 상태가 많은 구성 요소로부터의 입력을 받아 들일 것입니다. 이 예는 상태가 많은 구성 요소 (위의 프로파일 예)에서 값을 가져오고 아바타를 표시합니다.

  <code>$stateProvider.state('mystate', {
    url: '/',
    component: 'mystate'
  });
  </code>

  를 사용하려면 상태가 많은 구성 요소는 다음과 같이 속성을 통해 사용자 이름을 전달합니다. 당신이 사용하는 많은 라이브러리는 무국적 구성 요소 (및 가능한 서비스)의 컬렉션입니다. 그들은 반드시 행동을 수정하기위한 구성을 받아 들일 수 있지만, 그 외부의 논리에 대한 책임을지는 것은 아닙니다.

  구성 요소는 일원 바인딩

  를 사용해야합니다 이것은 구성 요소에 새로운 것이 아니지만 일반적으로 구성 요소에서 사용하는 것이 좋습니다. 일원 바인딩의 목적은 더 많은 작업을 다이제스트 사이클에로드하지 않도록하는 것입니다. 이는 응용 프로그램 성능의 주요 요인입니다. 이제 데이터는 외부를 보지 않고 구성 요소로 흐릅니다 (오늘날 존재하는 일부 커플 링 문제로 이어짐). 구성 요소는 해당 입력을 기반으로 단순히 스스로를 렌더링 할 수 있습니다. 이 디자인은 또한 미래의 마이그레이션에 도움이되는 Angular 2와 함께 작동합니다.

  이 예에서 제목 속성은 제공된 초기 값에 따라 한 번만 구성 요소에 바인딩됩니다. 제목이 외부 액터에 의해 변경되면 구성 요소에 반영되지 않습니다. 결합이 단방향임을 나타내는 구문은

  를 사용하는 것입니다.

  제목 속성이 변경되면 구성 요소가 여전히 업데이트됩니다. 가능할 때마다 일원 바인딩을 사용하는 것이 좋습니다.

  구성 요소는 단일 바인딩

  를 고려해야합니다 Angular는 또한 한 번에 데이터를 바인딩하는 능력이 있으므로 다이제스트주기를 최적화 할 수 있습니다. 본질적으로, Angular는 결합에 정의되지 않은 최초의 값을 바인딩에 제공하고, 그 값을 바인딩 한 다음 (모든 바인딩이 구문 분석되면) Digest 사이클에서 관련 관찰자를 제거합니다. 이는 특정 바인딩이 미래의 다이제스트 루프에 처리 시간을 추가하지 않음을 의미합니다.

  이것은 로 결합 식을 사용하여 수행됩니다. 수명주기 동안 입력 결합이 변하지 않는다는 것을 알고 있다면 그렇게하는 것이 합리적입니다. 이 예에서는 제목이 편도 바인딩 인 경우 구성 요소 내부에서 계속 업데이트되지만 단일 시간 바인딩으로 지정하기 때문에 여기에 바인딩이 업데이트되지 않습니다.

  <code>>
    <app>></app>>
  >
  </code>

  구성 요소는 수명주기 이벤트를 사용해야합니다 당신은

  기능을 새로운 함수로 알았을 것입니다. 구성 요소에는 구성 요소의 특정 측면을 관리하는 데 도움이되는 라이프 사이클 및 해당 이벤트가 있습니다.

  구성 요소 수명주기의 첫 번째 단계는 초기화입니다. 이 이벤트는 컨트롤러 후에 실행되며 바인딩이 초기화됩니다. 거의 항상 구성 요소 설정 또는 초기화 에이 방법을 사용해야합니다. 실행하기 전에 구성 요소에 모든 값을 사용할 수 있도록합니다. 컨트롤러에서 직접 바운드 값에 액세스하면 이러한 값을 사용할 수 있음을 보장 할 수 없습니다.

  ::

  다음 단계는 템플릿의 자식 요소를 연결하는 것입니다. 구성 요소가 초기화되면 템플릿에 사용 된 자식 요소를 렌더링했다는 보장은 없습니다. 어떤 식 으로든 DOM을 작동 해야하는 경우 중요합니다. 중요한 경고는 이벤트가 트리거 될 때 비동기로로드 된 템플릿이로드되지 않았을 수 있다는 것입니다. 항상 템플릿 캐싱 솔루션을 사용하여 템플릿을 항상 사용할 수 있는지 확인할 수 있습니다.

  <code>$stateProvider.state('mystate', {
    url: '/',
    templateUrl: 'views/mystate.html',
    controller: MyStateController
  });
  </code>

  <code>>
    <app>></app>>
  >
  </code>

  $onChanges() 구성 요소가 활성화되면 입력 값의 변화에 ​​반응해야 할 수도 있습니다. 일원 바인딩은 여전히 ​​구성 요소를 업데이트하지만 입력이 변경 될 때 듣기 위해 새로운

  이벤트 바인딩이 있습니다.

  이 예에서는 구성 요소에 제품 제목 및 설명이 제공된다고 가정하십시오. 아래 그림과 같이 변경 사항을 감지 할 수 있습니다. 현재 값과 이전 값을 포함하는 객체가 사용 가능한 바인딩에 맵핑 된 함수에 전달 된 객체를 볼 수 있습니다. $onChanges

  마지막 단계는 페이지에서 구성 요소를 제거하는 것입니다. 이 이벤트는 컨트롤러 전에 진행되며 그 범위가 파괴되기 전에 진행됩니다. 구성 요소가 이벤트 리스너, 관찰자 ​​또는 기타 DOM 요소와 같이 구성 요소가 메모리를 생성하거나 유지할 수있는 모든 것을 정리하는 것이 중요합니다.

  <code>$stateProvider.state('mystate', {
    url: '/',
    templateUrl: 'views/mystate.html',
    controller: MyStateController
  });
  </code>

  구성 요소는 명확한 API $onDestroy()를 가져야합니다 데이터 세트로 구성 요소를 구성하고 초기화하려면 구성 요소는 바인딩을 사용하여 이러한 값을 받아 들여야합니다. 이것은 때때로 구성 요소 API로 간주되는데, 이는 구성 요소가 입력을 허용하는 방법을 설명하는 다른 방법 일뿐입니다.

  여기서 도전은 바인딩에 대한 간결하지만 명확한 이름을 제공하는 것입니다. 때때로 개발자는 이름을 단축 시키려고 노력하지만 간결하게 만들려고하지만 구성 요소를 사용하는 데 위험합니다. 재고 코드를 입력으로 받아들이는 구성 요소가 있다고 가정 해 봅시다. 다음 중 어느 것이 더 나은가?
  나는 당신이

  <code>$stateProvider.state('mystate', {
    url: '/',
    component: 'mystate'
  });
  </code>

  가 더 좋다고 생각하기를 바랍니다. 때로는 개발자가 이름 충돌을 피하는 방법으로 구성 요소와 바인딩을 접두하는 것을 좋아합니다. 예를 들어

  와 같은 구성 요소를 접두사하는 것이 현명하지만, 재료 도구 모음이지만 모든 바인딩에 대한 접두사는 장황해질 수 있으며 피해야합니다.

  구성 요소는 이벤트 를 발행해야합니다 다른 구성 요소와 통신하려면 구성 요소가 사용자 정의 이벤트를 발행해야합니다. 서비스 사용 및 양방향 데이터 바인딩의 많은 예가 있습니다. 이지만 이벤트는 더 나은 디자인 선택입니다. 이벤트는 페이지와 의사 소통하는 방법으로 훨씬 더 효율적입니다 (JavaScript 언어의 기본 부분과 우연의 일치가없는 Angular 2에서 작동하는 방식).
  의 이벤트는

  (스코프 트리까지) 또는

  (스코프 트리까지)와 함께 사용할 수 있습니다. 이것은 빠른 샘플 이벤트의 실제 적용입니다.

  <code>.controller('ProfileCtrl', function ($scope, $http) {
    $http.get('/api/profile').then(function (data) {
      $scope.profile = data;
    });
  })
  .directive('profile', function() {
    return {
      templateUrl: 'views/profile.html',
      controller: 'ProfileCtrl'
    }
  })
  </code>

  구성 요소간에 통신 해야하는 두 가지 주요 상황이 있습니다. 알고있는 구성 요소와 모르는 구성 요소간에. 이 차이를 설명하기 위해 페이지의 탭을 관리하는 데 도움이되는 일련의 구성 요소와 해당 도움말 페이지 링크가있는 도구 모음이 있다고 가정 해 봅시다. symbol md-toolbar 이 경우 및
  구성 요소는 세 가지 다른 탭 세트를 만들기 위해 함께 작동하기 때문에 서로를 알 수 있습니다. 그러나 구성 요소는인지 범위를 벗어납니다.

  다른 탭이 선택 될 때마다 (

  구성 요소 인스턴스의 이벤트가 될 것입니다) 구성 요소는 인스턴스를 표시하도록 탭의 표시를 조정할 수 있도록 알아야합니다. my-tab 구성 요소는 이벤트를 부모 my-tabs 구성 요소까지 위로 발행 할 수 있습니다. 이 유형의 통신은 단일 함수 (탭 인터페이스)를 생성하기 위해 함께 작동하는 두 구성 요소 간의 내부 통신과 같습니다. my-tab 그러나 my-tabs가 현재 선택된 탭을 알고 싶다면 가시 콘텐츠를 기반으로 도움말 버튼을 변경할 수 있습니까? 이벤트는 부모가 아니기 때문에 결코

  에 도달하지 않습니다. 따라서 또 다른 옵션은

  를 사용하여 전체 구성 요소 트리에 대한 이벤트를 발행하여 모든 구성 요소가 듣고 반응 할 수 있습니다. 여기서 잠재적 인 단점은 이제 이벤트가 각 컨트롤러에 도달하고 다른 구성 요소가 동일한 이벤트 이름을 사용하는 경우 예기치 않은 효과를 유발할 수 있다는 것입니다. my-toolbar 사용 사례에 적합한 접근법을 결정하지만 다른 구성 요소가 이벤트에 대해 알아야 할 때마다 두 번째 옵션을 사용하여 전체 구성 요소 트리에 이벤트를 발행 할 수 있습니다. my-tab my-toolbar 요약 Angular 1 응용 프로그램은 이제 구성 요소를 사용하여 작성하여 응용 프로그램 작성의 모범 사례와 특성을 변경할 수 있습니다. 이것은 더 나은 것이지만, 구성 요소를 사용하는 것이 이전보다 더 나은 것은 아닙니다. Angular 1 구성 요소를 구축 할 때 다음 지점을 명심하십시오. $rootScope

  논리를 분리하십시오. 일관성과 품질을 보장하기 위해 애플리케이션의 다른 측면에서 가능한 한 내부 및 내부에서 멀리 떨어져있는 많은 구성 요소 로직을 유지하십시오.

  구성 요소를 단순하게 유지하고 단일 역할에 집중하십시오. 복잡한 구성 요소 일 수 있지만 단일 구성 요소의 다양한 작업은 논리적으로 단위로 연결되어야합니다.

  수명주기 이벤트를 사용하십시오. 구성 요소 수명주기에 연결하면 데이터가 적시에 준비되어 있고 정리할 수 있는지 확인할 수 있습니다.

  단방향 및 단일 샷 바인딩을 사용하십시오. 가능하면 일원 바인딩은 더 효율적이고 좋은 디자인을 촉진하는 반면 단일 시간 바인딩은 응용 프로그램의 속도를 높일 수 있습니다. 언제든지 라이프 사이클 이벤트를 사용하여 변경 사항을 관찰 할 수 있습니다.

  이벤트를 사용하여 의사 소통합니다. 구성 요소는 Angular 2의 기능과 일치하며 더 잘 설계된 사용자 정의 이벤트를 사용하여 통신 할 수 있습니다.

  명확한 API가 있습니다. 구성 요소의 명확하고 쉽게 이해할 수 있는지 확인하십시오.

  Angular 1.X 응용 프로그램에서 구성 요소를 사용하고 있습니까? 아니면 Angular 2로 전환 할 때까지 기다릴 건가요? 아래 의견에 대한 귀하의 경험에 대해 듣고 싶습니다.
  • 각도 1.5 구성 요소를 구축 할 때의 FAQ
    각도 1.5 구성 요소와 지침의 주요 차이점은 무엇입니까?
  Angular 1.5 구성 요소는 지침을 만드는 데 더 간단하고 직관적 인 API입니다. 지침은 강력하지만 유연성으로 인해 사용하기가 어려울 수 있습니다. 반면, 구성 요소는 더 간단한 구성을 가지고 있으며 UI 요소를 구축하는 데 사용되도록 설계되었습니다. 또한 일원 데이터 바인딩 및 수명주기 후크의 사용을 용이하게하여 예측 가능한 데이터 흐름과 더 쉬운 디버깅으로 이어질 수 있습니다.
  • 각도 1.5 구성 요소에서 일원 데이터 바인딩을 사용하는 방법은 무엇입니까?

    단방향 데이터 바인딩은 각도 1.5 구성 요소의

    속성을 ​​사용하여 달성 할 수 있습니다.

    수명주기 후크 란 무엇입니까? 각도 1.5 구성 요소에서 사용하는 방법은 무엇입니까? bindings 수명주기 후크는 구성 요소의 수명주기에서 특정 지점에서 호출되는 함수입니다. Angular 1.5는 ,

    , 및 와 같은 몇 가지 수명주기 후크를 소개합니다. 이러한 후크는 데이터 초기화, 리소스 청소 또는 바인딩 변경에 반응하는 것과 같은 작업을 수행하는 데 사용될 수 있습니다.

    각도 1.5의 구성 요소간에 통신하는 방법은 무엇입니까? $onInit 각도 1.5의 바인딩 및 이벤트를 사용하여 구성 요소 간의 통신을 달성 할 수 있습니다. 부모 간 의사 소통은 바인딩을 사용하여 수행 할 수 있으며, 이벤트를 사용하여 아동 간 의사 소통을 수행 할 수 있습니다. 이렇게하면 단방향 데이터 흐름이 용이 해져 애플리케이션을 쉽게 이해할 수 있습니다. $onChanges 각도 1.5의 지시문에서 구성 요소로 마이그레이션하는 방법은 무엇입니까? $onDestroy 각도 1.5의 지침에서 구성 요소로 마이그레이션하는 데 몇 단계가 포함됩니다. 먼저, 지침을 교체하여 객체를 구성 요소 정의로 정의하십시오. 그런 다음 링크 함수를 수명주기 후크로 바꾸십시오. 마지막으로, 양방향 데이터 바인딩을 단방향 데이터 바인딩 및 이벤트로 바꾸십시오. $postLink 지침 대신 각도 1.5에서 구성 요소를 사용하면 어떤 이점이 있습니까?

    각도 1.5의 구성 요소는 지침보다 몇 가지 이점을 제공합니다. 그들은 단방향 데이터 바인딩 및 일원 데이터 흐름을 용이하게하고 수명주기 후크를 제공하는 더 간단한 API를 가지고 있습니다. 이러한 기능은 코드를 쉽게 이해하고 디버깅하고 유지할 수 있도록 할 수 있습니다.

    각도 1.5 구성 요소에서 전사를 사용하는 방법은 무엇입니까?

    전사는 구성 요소 정의에서 각도 1.5 구성 요소에서 멀티 슬롯 전사를 만드는 방법은 무엇입니까? 객체 구문이있는 각도 1.5 구성 요소에서 라이프 사이클 후크를 사용하는 방법은 무엇입니까?

    일원 바인딩이 업데이트 될 때마다 각도 1.5 구성 요소의 수명주기 후크가 호출됩니다. 바인딩의 전류 및 이전 값을 포함하는 변경 객체를 수신합니다. 이것은 바인딩 변경에 반응하고 구성 요소 상태 업데이트 또는 데이터 가져 오기와 같은 작업을 수행하는 데 사용할 수 있습니다.

    각도 1.5 구성 요소에서

    라이프 사이클 후크를 사용하는 방법은 무엇입니까?

    구성 요소와 하위 요소의 요소가 연결된 후에는 각도 1.5 구성 요소의

    수명주기 후크가 호출됩니다. 이는 이벤트 리스너 설정 또는 DOM 작동과 같은 구성 요소의 DOM 요소에 대한 액세스가 필요한 작업을 수행하는 데 사용할 수 있습니다.

위 내용은 품질 각도 1.5 구성 요소 구축 가이드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!