Angular 6とその新機能—3分で説明

Angularは、バージョン6.0.0、特にAngular-cliでいくつかの驚くべき新機能を備えています。現在、Angular 6を使用すると、古いパッケージを簡単に更新したり、AngularElementsを使用してネイティブWeb要素を作成したりすることができます。見てみましょう!

ng add

ng addはAngular-cliの新しいコマンドで、Angularアプリに新しいパッケージをインストールしてダウンロードするのに役立ちます。npmと同じように機能しますが、それを置き換えるものではありません。

ngアップデート

ng update新しいAngular-cliコマンドでもあります。パッケージの更新とアップグレードに使用されます。たとえば、Angular5からAngular6、またはAngularアプリ内の他のパッケージにアップグレードする場合に非常に役立ちます。

サービス自体の内部でプロバイダーを宣言する

この更新の前に、プロバイダー配列を宣言する必要がありました app.module.ts

Angular 6を使用すると、providedIn:rootプロパティを「デコレータ」内に配置することで、スーパーバイザ自体の内部でサービスを提供できます@injectable"

テンプレートディレクティブの代わりにng-templateを使用する

新しいバージョンのAngular ng-templateでは、templateタグの代わりにHTMLをレンダリングするために使用できます。ng-templateはAngular要素であり、およびなどの構造ディレクティブとともに使用する*ngForと機能します。*ngIf

角度要素

Angular6はAngular要素を紹介しました。Angular要素をネイティブWeb要素としてレンダリングすることができ、それらは信頼できるHTML要素として解釈されます。

以下のコマンドを実行して、Angular要素を追加できます。

createCustomElementコンポーネントをインポートします。

次に、カスタマイズした要素を作成します。

MyElemComponent.ts

結果:

注:カスタム要素を信頼できるHTMLタグにするには、DomSanitizerメソッドfromを実装@angular/platform-browserする必要があります。

Angular要素について詳しくはこちらをご覧ください

RxJS6.0.0へのアップグレード

Angular6は最新バージョンのRxjsライブラリを使用します。これで、AngularアプリでRxJS6の最新機能を楽しむことができます:)

まとめ

Angular自体にはAngularコアに画期的な変更はあまりありませんが、Angular-cliは本当にエキサイティングです。Angularチームは、パフォーマンスに重点を置き、PWAを簡単に構築し、Angularを簡単に操作できる優れた環境を提供しています。

Twitterで私を見つけることができます。

ちなみに、私は最近、モバイルアプリケーションの1つで強力なソフトウェアエンジニアのグループと協力しました。組織は素晴らしく、製品は私が一緒に仕事をした他の会社やフリーランサーよりもはるかに速く、非常に迅速に届けられました。私は他のプロジェクトに正直にそれらを推薦できると思います。連絡を取りたい場合は、私にメールを送ってください—[email protected]