AngularJS UI 구성 요소 라이브러리를 최신 각도로 이식하는 방법은 무엇입니까?

Question

저는 수년 동안 개인 프로젝트를 진행해 왔습니다. 이것은 일을위한 것이 아니며 돈을 벌 수 없습니다. 따라서 프로젝트 개발을 위해 시간을 들여야합니다. 즉, AngularJS를 프런트 엔드 UI 라이브러리로 사용하고 있음을 의미합니다.

AngularJS는 웹 서버에서 기존 HTML을 "부트 스트랩"하기 위해 모든 지시문, 구성 요소 및 서비스가있는 "구성 요소"라이브러리입니다. 백엔드는 모든 HTML을 렌더링하는 CakePHP로 처리됩니다.

대규모 단일 페이지 앱이없고 AngularJS 라우팅이 없습니다. 각 페이지 요청마다 내 UI 라이브러리를로드합니다. 그 방법을 계속 사용하고 싶습니다.

는 나는 그것을 아주 좋은 그리고 난 다른 개발자 각도 질문이있을 때 이 사람로 이동 해요 각도 5. 작업 내 일 작업을 보낸다.

이러한 기술에도 불구하고 은 AngularJS에서 최신 Angular까지 내 UI 라이브러리의 마이그레이션 경로를 파악할 수 없었습니다. Angular 2+는 2 년 전부터 사용해 왔으며 AngularJS와 계속해서 얽혀 있습니다.

그것은 기본적으로 내 자신의 UI 라이브러리와 같은 라이브러리의 같은 종류의 각도 ​​(4)에 내장 된 Material Angular 프로젝트를 살펴 보자 : 여기

내 문제의 예입니다. 여기에는 사용할 수있는 지시문 및 구성 요소 모음이 포함되어 있습니다.

으로 응답하는 웹 서버가 있고 HTML인데 사용자가 UI 라이브러리로 Material Angular를 사용하려는 경우 사용자가 할 수 없습니다. 예를 들어 자동 완성 구성 요소를 예로 들어 봅시다. 구성 요소의 작동 예는

https://material.angular.io/components/autocomplete/overview

있습니다 :

문서에서 https://stackblitz.com/angular/ggmpnaqqqxk

당신이 할 수있는 것을 알 수

문서는 자동 완성를 사용하는 방법에 대해 설명합니다 다음과 같은 구성 요소를 사용하십시오.

<mat-autocomplete> 
    <mat-option *ngFor="let option of options" [value]="option"> 
     {{ option }} 
    </mat-option> 
</mat-autocomplete> 

그러나 작업 예제를 보면 내가 갖고있는 문제를 볼 수 있습니다. 자신의 예에서, 그들은 부트 스트랩 전체 각도 응용 프로그램 에 사용되는 용기에자동 완성 예를 가지고 응용 프로그램 HTML를 삽입합니다.

기존 HTML 페이지에서 <mat-autocomplete> 구성 요소를 사용할 수 없습니다.

이전 Material Angular 프로젝트에 대해 AngularJS에서 수행 한 것과 정확히 동일한 구성 요소를 살펴 보겠습니다.

자동 완성의 이름은 <md-autocomplete>이며 이전 버전은 기본적으로 동일한 기능을 가지고 있습니다.

도 동작하는 예제가있다 :

https://codepen.io/anon/pen/goLrpJ

이 너무 부트 스트랩 AngularJS와 응용 프로그램,하지만 기존의 HTML 그대로을 떠난다. 따라서 기존 HTML에서 <md-autocomplete>을 직접 사용할 수 있습니다.

기존 HTML과 함께 구성 요소 라이브러리로 사용할 수있는 Angular 5 응용 프로그램은 어떻게 만듭니 까?

Answer 1

Angular Elements은 가까운 장래에이 문제를 해결하기로되어 있습니다. this write-up에서 자세하게 설명했듯이, 셀프 부트 스트래핑, 독립형 사용자 정의 요소를 제공 할 수 있습니다.

attributes 및 projected content의 사용을 루트 구성 요소로 제한하는 현재까지는 해결되지 않은 문제가 남아 있습니다.이 문제는 실제 시나리오에서 사용자 지정 요소로 사용되는 Angular 구성 요소를 심각하게 좁 힙니다.