Angular開発テクニック

6632 ワード
アングラー 
          ngChina2018     ，  will     Angular    ，    Angular            ，     Angular

ツール編
   “     ，     ”，            `VS Code`
  • は、 を破棄し、ショートカットCommd + Pを使用してドキュメントを検索します.デフォルトでは、最近開いたドキュメントが表示され、ファジイ検索ファイル
    • がサポートされます.
  • 最近のドキュメントをすばやく開きます:前進Ctrl+➕後退Ctrl+➖
  • VS Codeリビルド機能を活用する、ショートカットキーCommand +でコードをリビルド
  • インストールプラグインAngular Extension Pack(will保哥出品を認める)は、Angularの開発効率を向上させる多くのプラグインを統合しています.例えば、
    •    TS    `ng-import-*`       
           ` a-*** `      Angular       （Angular v7 Snippets）
    ` ng-* `       ng   ，   Component，Directive   （Angular Snippets）

    ショートカットキーでJSONをTSクラスに変換
    Ctrl+Alt+V       JSON    Typescript
Ctrl+Alt+S     JSON       Typescript

    ショートカットキーによる (Angular 2-switcher)の実用的な機能もあります
    その他にも多くの機能があり、プラグインには`Angular Extension Packの詳細が記載されています.
  • プラグインClipboard Historyをインストールします.このプラグインはあなたの最近のコピーの記録を保存し、最近のコピーの内容
    • を記録し、貼り付けるのに便利です.
  • は、ファイルのローカル履歴を維持するためのプラグインLocal Historyをインストールする.ファイルを変更するたびに、古いコンテンツのコピーはローカル履歴に保持され、いつでもファイルを履歴の古いバージョンと比較することができます.事故が発生した場合、失われたコンテンツを復元するのに役立ちます..historyのフォルダを生成してローカル修正のバックアップを行うことに注意してください.したがって、git倉庫に提出しないように、このフォルダをさらに.gitignoreで排除する必要があります.
  • はプラグインPrettier - Code formatterをインストールして、これは1つのコードのフォーマットのプラグインで、いくつかのフォーマットのプラグインを使ったことがあって、個人は最も良い感じの1つを使って、更にAngular開発
    • に適しています
  • ChromeプラグインAngular Angury をインストールしてデバッグ作業を行い、ComponentのState,Router Treeを表示できます.NgModulesのいくつかのステータス(このプラグインは複雑なプロジェクトでは特に使いにくいわけではありません.いくつかのダイナミックコンポーネントのサポートが悪いことも含まれていますが、いくつかの簡単なプロジェクトでは、初心者が勉強している間にこのプラグインをインストールするとデバッグが容易になります.
    開発編
           Angular

    1.テンプレート言語asを使用して、asを使用してネストされた構造の深い属性の名前を変更する前に、
    
       
    {{ queue.result.file.icon }}
    
       
    {{ queue.result.file.name }}
    
       
    {{ queue.result.file.size }}

    改善後:
    
     
          
    {{ file.icon }}
    
          
    {{ file.name }}
    
          
    {{ file.size }}

    2.*ngIfElseを活用し、多くの人が*ngIfを書いているが、実際にはAngularがelseの書き方をサポートしていることを知らない. *ngIf=" ; else " を見て、次の2つのコードを見てください.
    改善前:
     0">
     ...

    

     0">

    改善後:
     0; else emptyTemplate;">
     ...

    改良前の書き方は、同様の効果も得られるが、データはasyncで購読されるため、第1の書き方は2回の購読に相当し、もちろんasで解決することもできるが、ここでは一例にすぎない.もう一つ、条件が多い場合は、1つ目の方式で書くと、条件が修正されている場合は逆取り後の条件を維持しなければならず、ngIfElseの方式では1回のメンテナンスしか必要ありません.
    3.ng-containerを使用してコードを整理し、コードをより明確にし、コードの可読性を向上させる
    
     ...


     ...


     ...

    4.@ViewChild指定されたタイプのインスタンスを読み込む

    上記の行のコードには、3つのインスタンスElementRef、ThyInputComponent、ThyAutoFocusDirectiveがありますが、場合によっては、指定したタイプのインスタンスを取得するにはどうすればいいですか?
    @ViewChild('input', { read:ThyInputComponent })  inputComponent : ThyInputComponent ;

    5.asyncパイプを使用して、結果を中間属性に保存せずにテンプレートに直接ストリームを購読します.コンポーネントが破棄されると、Angularは自動的に購読をキャンセルします.
    
     ...

    場合によっては、サブスクリプションのデータを繰り返し使用する必要があるかもしれませんが、使用するたびにasyncでサブスクリプションすることはできませんので、さっき言ったasの位置合わせで名前を変更することができます.
    
        {{data.length}}

    6.takeUntilを使用してサブスクリプションを管理する複雑なビジネスでは、複数のストリームをサブスクリプションする必要があります.1つ1つのサブスクリプションをキャンセルするのは煩雑で、冗長コードが多く発生し、コードのメンテナンスに不利です.このとき、takeUntilで複数のサブスクリプションを管理し、一括してサブスクリプションをキャンセルすることができます.
    private _ngUnsubscribe$ = new Subject();

ngOnInit() {
   this.students$.pipe(
      takeUntil(_ngUnsubscribe$)
   ).subscribe(() => {
           ...
   });
   this.books$.pipe(
      takeUntil(_ngUnsubscribe$)
   ).subscribe(() => {
           ...
   });
}
ngOnDestroy() {
    this._ngUnsubscribe$.next();
    this._ngUnsubscribe$.complete();
}

    7.ngZone runOutsideAngularを合理的に使用してアプリケーション性能を向上させるAngularは、zone.jsを使用しているため、変化検出を自動的に処理できることを知っています.簡単に言えば、zone.jsはパッチを適用することでブラウザのイベントをブロックし、変化検出を行うことですが、変化検出はリソースを極めて消費しています.大量のイベントがバインドされている場合、パフォーマンスに問題が生じるため、runOutsideAngularを使用して不要な変化検出を低減することができます.
     this.ngZone.runOutsideAngular(() => {
     this.renderer.listen(this.elementRef.nativeElement, 'keydown', event => {
        const keyCode = event.which || event.keyCode;
           if (keyCode === keycodes.ENTER) {
                event.preventDefault();
                this.ngZone.run(() => {
                    this.thyEnter.emit(event);
                });
           }
     });
  });

    上記のコードは、runOutsideAngularを使用しない場合は、キーボード入力イベントをトリガーするだけで変化検出を実行します.この場合、enterイベントのみの場合、runOutsideAngularを呼び出して変化検出をアクティブにトリガーできます.
    8.再帰を実現するためにngZone.run()を活用
    



       
    {{node.title}}

    我々が実際に開発する過程で,業務シーンが比較的単純であれば,AngularのngTemplateOutletによって再帰的な展示を実現することができ,業務が複雑であれば,コンポーネントによって実現することを提案するツリー構造のデータをよく示す.
    最後に書く
    上は私のこの年のAngularの开発の过程の中で蓄积したいくつかの小さい技巧(まだ思い出していないかもしれませんが、私は思い出してゆっくりと上へ补います)で、みんなはもし间违った地方があることを発见するならば、指摘してください.実は去年からこの文章を书いていましたが、どうも欠点が感じられますが、どうでもいいです~~アングラーの勉强者に助けてほしいです~
    著者:王凱
    出典:Worktileテクニカルブログ
    テクノロジーとコラボレーションに関する詳細な質問へのアクセスを歓迎します.
    文章の転載は出典を明記してください.
    • JavaFX 2-Ensemble学習(2)-BorderPaneに上下左右以外のコントロールとレイアウトテクニックを追加
    スタックの連続k個の重複を除去する文字