AngularJSからAngularへの移行：要素を転送するための目標、計画、規則（1/3）

何かをアップグレードし始めているモジュールに角度モジュールがない場合、それを作成してメインアプリケーションモジュールにフックします。

 import {NgModule} from "@angular/core"; @NgModule({ // }); export class SmthModule {} @NgModule({ imports: [ ... SmthModule, ], }); export class AppModule {} 

角度モジュールがまだ生きている場合、新しいモジュールには.new接尾辞が付けられます。 角の古いモジュールと一緒に接尾辞を切り取ります。

良いケースでは、デコレータを追加し、エクスポートからdefaultを削除し、インポートを編集し（デフォルトを削除したため）、モジュールの角度にインポートし、モジュールの角度でダウングレードします：

 import {Injectable} from "@angular/core"; @Injectable() export class SmthService { ... } // angular module @NgModule({ providers: [ ... SmthService, ], }); // angularjs module import {downgradeInjectable} from "@angular/upgrade/static"; ... .factory("vim.smth", downgradeInjectable(SmthService)) 

サービスは、Angurjarsの古い名前で引き続き利用でき、追加の構成は必要ありません。

良いオプションは、すべてのインジェクションサービスが既にAngularに移行しているため、 templateCacheやcompiler特定のものは使用されないことを意味します。

残りの95％のケースでは、まず注入されたものをアップグレードし、あらゆる種類の奇妙なサービスなどを取り除きます。

メタデータを使用してデコレータをコントローラに証明し、デコレータの入力/出力を配置して、クラスの先頭に転送します。

 import {Component, Input, Output, EventEmitter} from "@angular/core"; @Component({ //   `-`     ,   camelCase selector: "vim-smth", //       require("./smth.html") templateUrl: "smth.html", }) export class SmthComponent { @Input() smth1: string; @Output() smthAction = new EventEmitter<void>(); ... } // angular module @NgModule({ declarations: [ ... SmthComponent, ], //         ,         exports: [ ... SmthComponent, ], }); // angularjs module import {downgradeInjectable} from "@angular/upgrade/static"; ... .directive("vimSmth", downgradeComponent({ component: SmthComponent }) as ng.IDirectiveFactory) 

注入されたすべてのサービスは、すべてコンポーネント（それらをフックする方法-Anythingの下）を必要とし、テンプレート内で使用されるすべてのコンポーネント/ディレクティブ/フィルターは格納庫にある必要があります。

テンプレートで使用されるすべてのコンポーネント変数はpublicとして宣言する必要があります。そうでない場合は、AoTアセンブリに分類されます。

コンポーネントが（入力を介して）上記のコンポーネントから出力用のすべてのデータを受け取った場合、 changeDetection: ChangeDetectionStrategy.OnPushをメタデータに大胆に書き込みます。 これは、コンポーネントの入力のいずれかが変更された場合にのみテンプレートをデータと同期する（このコンポーネントの変更検出を開始する）ことを角度に伝えます。 理想的には、ほとんどのコンポーネントがこのモードになっている必要があります（ただし、サービスを介して出力用のデータを受け取る非常に大きなコンポーネントのため、ほとんどそうではありません）。

コンポーネントと同じですが、テンプレートと@Directiveデコレータはありません。 そこにあるモジュールにスローされ、他のモジュールのコンポーネントで使用するためにエクスポートされるものは同じでなければなりません。

camelCaseのセレクターは、コンポーネントテンプレートでも使用されます。

これで@Pipeなり、 PipeTransformインターフェイスを実装するPipeTransformます。 コンポーネント/ディレクティブがあるモジュールに自分自身を投げ込み、他のモジュールで使用する場合はエクスポートする必要もあります。

camelCaseのセレクターは、コンポーネントテンプレートでも使用されます。

角度のディレクティブとフィルターは、角度のコンポーネントテンプレートでは使用できません。逆の場合も同様です。 フレームワーク間では、サービスとコンポーネントのみがスローされます。

まず、エクスポートのデフォルトを取り除きます。なぜなら、 AoTコンパイラーはそれを使用できません。

第二に、モジュールの現在の構造（非常に大きい）とインターフェースの使用（クラスがある同じファイルにヒープを置く）のために、そのようなインターフェースのインポートとデコレーターでの使用で面白いバグをキャッチしました：インターフェースがエクスポートを含むファイルからインポートされた場合インターフェースだけでなく、たとえばクラス/定数も使用されます。このようなインターフェースは、デコレータの横の入力に使用され（ @Input() smth: ISmth ）、コンパイラはインポートエラーexport 'ISmth' was not found 。 これは、すべてのインターフェースを別のファイルに転送する（モジュールが大きいためにファイルが1ダースの画面に表示されるために悪い）か、インターフェースをクラスに置き換えることで修正できます。 クラスで置き換えることは機能しません。 複数の親から継承することはできません。

選択したソリューション：各モジュールにinterfaceディレクトリを作成しinterfaceディレクトリには、対応するインターフェイス（部屋、ステップ、コンテンツ、ワークブック、宿題など）を含む本質的に名前の付いたファイルが置かれます。 したがって、ローカルではなく使用されるすべてのインターフェイスがそこに置かれ、そのようなファイルディレクトリからインポートされます。

問題のより詳細な説明：
https://github.com/angular/angular-cli/issues/2034#issuecomment-302666897
https://github.com/webpack/webpack/issues/2977#issuecomment-245898520

アップグレードされたコンポーネントがtransglud（ ng-content ）を使用する場合、角度テンプレートからコンポーネントを使用するとき：

• マルチスロットのトランスクロスは機能せず、1つのng-content介してすべてを1つのピースに転送する機能のみが機能します。
• そのようなコンポーネントの翻訳では、UIビューをスローできません。 動作しません（ビューポートコンポーネントをアップグレードしようとすると中断しました）。
• コンポーネントがこのように使用される場合、そのアップグレードを使用されているすべての場所のアップグレードに延期するか、すでにアップグレードされたコンポーネントの並列操作のためにそのコピーを作成します。

角度成分で角度成分を使用する場合、入力は通常の角度成分のように（ []および()を使用して）書き込まれますが、 kebab-case

 <vim-angular-component [some-input]="" (some-output)=""> </vim-angular-component> 

このようなテンプレートをアングルで書き換えるときは、camelCaseでケバブケースを編集します。

乗車ではないので、 AoTコンパイラーはそれを誓います。 したがって、同じファイルをtsファイルにインポートし、コンポーネントのコンポーネントを介して転送します。

だった：

 <span> ${require('!html-loader!image-webpack-loader?{}!./images/icon.svg')} </span> 

になりました：

 const imageIcon = require<string>("!html-loader!image-webpack-loader?{}!./images/icon.svg"); public imageIcon = imageIcon; <span [innerHTML]="imageIcon | vimBaseSafeHtml"> </span> 

またはimg経由で使用するため

だった：

 <img ng-src="${require('./images/icon.svg')}" /> 

になりました：

 const imageIcon = require<string>("./images/icon.svg"); public imageIcon = imageIcon; <img [src]="imageIcon | vimBaseSafeUrl" /> 

文字列からの$compileがないので、 $compileはもうありません（実際、小さなハックがありますが、ここでは$compileなしで95％のケースに対応する方法を示し$compile ）。

動的に挿入されたコンポーネントは、次のようにスローされます。

 @Component({...}) class DynamicComponent {} @NgModule({ declarations: [ ... DynamicComponent, ], entryComponents: [ DynamicComponent, ], }) class SomeModule {} //  @Component({ ... template: ` <vim-base-dynamic-component [component]="dynamicComponent"></vim-base-dynamic-component> ` }) class SomeComponent { public dynamicComponent = DynamicComponent; } 

挿入されたコンポーネントのクラスは、サービス、入力、またはその他の方法でロールできます。

vim-base-dynamic-componentは、入力/出力をサポートする他のコンポーネントの動的挿入用に既に作成されたvim-base-dynamic-componentです（将来、必要に応じて）。

条件ごとに異なるテンプレートを出力する必要があり、そのために動的なtemplateUrlを使用した場合、これを構造ディレクティブに置き換えて、コンポーネントを3つに分割します。 モバイル/非モバイルの出力を分割する例：

リクエスト/データ処理
モバイル向けのマッピング
デスクトップ用ディスプレイ

最初のコンポーネントには最小限のテンプレートがあり、データの操作、ユーザーアクションなどの処理に取り組んでいます（テンプレートは、簡潔さのため、コンポーネントのコンポーネントを個別のhtmlファイルとtemplateUrl代わりに ''に置くのが理にかなっています）。 例：

 @Component({ selector: "...", template: ` <some-component-mobile *vimBaseIfMobile="true" [data]="data" (changeSmth)="onChangeSmth($event)"> </some-component-mobile> <some-component-desktop *vimBaseIfMobile="false" [data]="data" (changeSmth)="onChangeSmth($event)"> </some-component-desktop> `, }) 

vimBaseIfMobileは、内部条件と渡されたパラメーターに従って対応するコンポーネントを表示する構造ディレクティブ（この場合はngIf直接の類似物）です。

携帯電話とデスクトップのコンポーネントは、入力を介してデータを受信し、出力を介していくつかのイベントを送信し、必要なものの出力のみを処理します。 すべての複雑なロジック、処理、データの変更-それらを表示するメインコンポーネント。 そのようなコンポーネント（dextop / mobile）では、 changeDetection: ChangeDetectionStrategy.OnPush安全に記述できます。

app/entries/angularjs-services-upgrade.tsを開き、既存のコピーと貼り付けの例に従って（このファイル内のすべて）：

 // EXAMPLE: copy-paste, fix naming/params, add to module providers at the bottom, use // ----- import LoaderService from "../service/loader"; // NOTE: this function MUST be provided and exported for AoT compilation export function loaderServiceFactory(i: any) { return i.get(LoaderService.ID); } const loaderServiceProvider = { provide: LoaderService, useFactory: loaderServiceFactory, deps: [ "$injector" ] }; // ----- @NgModule({ providers: [ loaderServiceProvider, ] }) export class AngularJSServicesUpgrade {} 

すなわち 既存のブロックをコピーし、必要なサービスをインポートし、そのための定数/関数の名前を編集し、その中で使用されるサービスとその名前を編集します（ほとんどの場合、 SmthService.ID代わりに、格納庫でサービスにアクセス（ SmthService.IDする名前を挿入する必要があります）、追加新しい定数smthServiceProviderをファイルの最後にあるプロバイダーのリストにsmthServiceProviderします。

このようなサービスは、ネイティブのAngularとして使用されます。クラスごとにコンストラクタに単純に注入できます。

元のコンポーネントを含むファイルに（最初に）次のスタブを配置します。これにより、コンポーネントを角度環境にスローできます。

 import {Directive, ElementRef, Injector, Input, Output, EventEmitter} from "@angular/core"; import {UpgradeComponent} from "@angular/upgrade/static"; @Directive({ /* tslint:disable:directive-selector */ selector: "vim-smth" }) /* tslint:disable:directive-class-suffix */ export class SmthComponent extends UpgradeComponent { @Input() smth: boolean; @Output() someAction: EventEmitter<string>; constructor(elementRef: ElementRef, injector: Injector) { super("vimSmth", elementRef, injector); } } @NgModule({ declarations: [ ... SmthComponent, ] }) export class SmthModule { 

この場合、 Component代わりにDirectiveデコレータが使用されることに注意してください。これは、Angularがこれを処理する方法の機能です。

すべての入力/出力（元のコンポーネントからのバインダー）を登録しdeclarations対応するモジュールのdeclarationsコンポーネントを登録することを忘れないでください。

将来、このコンポーネントをアップグレードすると、そのようなスタブは角度の実際のコンポーネントになります。

コンポーネント（または古いコンポーネントディレクティブ）がコントローラー/リンク関数に$attrsを注入する場合、そのようなコンポーネントは格納庫から格納庫にキャストできず、格納庫のアップグレードされたコピーの隣にアップグレードまたは配置する必要があります。

tslintエラーを無効にするには、セレクターの名前とディレクティブのデコレーターに対するクラスの不一致を誓わないことが必要です。 これらの行（コメント）は、コンポーネントのアップグレード後に削除する必要があります。

• $q Promiseサービスを使用すると、ネイティブPromise置き換えられます。 finallyはありませんが、これはcore.js/es7.promise.finallyによって修正され、現在は修正されています。 また、遅延はありません。ts-deferredが追加され、毎回自転車を書かないようにします。
• $timeoutと$interval代わりに、ネイティブwindow.setTimeoutとwindow.setInterval $interval使用します。
• ng-show="visible"代わりに、属性ng-show="visible"バインド[hidden]="!visible" ;
• track by常にメソッドである必要があります（メソッドのTrack後置を忘れないでください）：

 *ngFor="let item of items; trackBy: itemTrack" public itemTrack(_index: number, item: IItem): number { return item.id; } 

• 99％の場合、 $digest 、 $apply 、 $evalAsyncなどは、置換なしで切り取られます。
• サービスインジェクションの場合、コンストラクタコンストラクconstructor(private someService: SomeService)に書き込むだけで、角度自体がどこから取得するかを理解します。
• ディレクティブ内で、それがハングする要素はconstructor(private element: ElementRef) AfterViewInitからアクセス可能で、 AfterViewInitフックで初期化されます（ ElementRefはDOMオブジェクトそのものではなく、 this.element.nativeElementによってアクセス可能this.element.nativeElement ）。
• ng-include置換なしでng-includeなく、コンポーネントの動的作成を使用します。
• angular.extend 、 angular.merge 、 angular.forEachなどが欠落しており、ネイティブのjsとlodashを使用しています。
• angular.elementとそのすべてのメソッドが欠落しています。 @ViewChild/@ContentChildを使用し、ネイティブjsを処理します。
• OnPushしてコンポーネントの検出チェンジャーをプルする必要がある場合- private changeDetectorRef: ChangeDetectorRef挿入しprivate changeDetectorRef: ChangeDetectorRefおよびプルprivate changeDetectorRef: ChangeDetectorRef this.changeDetectorRef.markForCheck() ;
• テンプレートから$ctrl.を見つけました$ctrl. -名前によるsv-youおよびメソッドへの直接アクセス。
• ng-bind-html="smth" -> [innerHTML]="smth"
• $sce import {DomSanitizer} from "@angular/platform-browser"; > import {DomSanitizer} from "@angular/platform-browser";
• ng-pural > [ngPlural] https://angular.io/api/common/NgPlural
• ngClassはそれができません

 [ngClass]="{ [ styles.active ]: visible, [ styles.smth ]: smth }" 

したがって、配列に置き換えます

 [ngClass]="[ visible ? styles.active : '', smth ? styles.smth : '' ]" 

• ui-routerサービスのクラスは@uirouter/coreからインポートされ、古い$プレフィックスなしで挿入されます

 import {StateService, TransitionService} from "@uirouter/core"; constructor(stateService: StateService, transitionService: TransitionService) { 

• コンポーネントのデータ属性は、 attr.data-smth=""または[attr.data-smth]=""として登録されます。
• コンポーネント内のrequire /ディレクティブは、現在のコンポーネントコンストラクターcontructor(private parentComponent: ParentComponent)のコンストラクターに直接コンポーネントクラスを挿入することで置き換えられます。 Angular自身は、これがコンポーネントであることを確認し、それをフックします。 微調整のために、 @Self （親間の検索）、 @Self （コンポーネント上で直接検索）、 @Optional （存在しない場合と存在しない場合があり、変数は未定義）の@Optionalがあります。 複数の@Host() @Optional() parentComponent: ParentComponentスローできます。 コンポーネント/ディレクティブをコンポーネント/ディレクティブに再利用できます。
• 双方向バインディングは、そのコンポーネントでより明示的になり、同じ名前と接尾辞Change Outputを必要としOutput 。

 export class SmthComponent { @Input() variable: string; @Output() variableChange = new EventEmitter<string>(); <vim-smth [(variable)]="localVar"></vim-smth> 

• 角度成分の可能な半透明の角度成分。 名前付きのtranslucをチェックする必要があります：動作するかどうか（セレクターで行われる角度で）

 <!-- angular --> <ng-content></ng-content> <!-- angularjs --> <vim-angular-component> transcluded data </vim-angular-component>