学習資料はhttps://angular.cn/tutorialangularチュートリアル「ヒーローガイド」によると
一、完了1、人材リストの取得と表示2、選択した人材詳細の編集3、異なる人材データ間のナビゲーションの完了
二、機能1を完成し、内蔵命令で要素を表示または非表示にし、人材データリスト2を表示し、angularコンポーネントを作成して人材の詳細を表示し、人材の配列3を表示し、読み取り専用データのために単一のデータバインド4を使用し、編集可能なフィールドを追加し、双方向データバインドを使用して更新モデル5にバインドし、追加方法を使用してユーザーイベントにバインドする6、ユーザーは、メイン・リストで人材を選択し、詳細ビューで7を編集したり、パイプを使用してデータ8をフォーマットしたり、共有サービスを作成して人材9を管理したり、異なるビューとそのコンポーネント間のルーティングを使用したりすることができます.
第1ステップ1、ng new myApp angular cliを使用して初期のアプリケーション構造を作成する2、angularコンポーネントを使用してデータを表示する3、{{title}}二重カッコ補間式を使用してデータを表示する
ステップ2:(ng g class talent追加talent.ts)1、ng g component components/talentまたはng generate component talents CLIを使用して2番目のコンポーネントを作成し、人材リストのビュー2を表示し、talentsで作成したコンポーネントをシェルコンポーネントAppComponentに追加して、それを表示する3、UppercasePipeを使用して人材の名前をフォーマットする4、ngModel命令による双方向データバインド
ステップ3:1、人材ガイドアプリケーションは1つのマスタービューに英雄リスト2を表示し、ユーザーは1人の人材を選択し、その英雄の人材3を表示し、ngForを使用して1つのリスト4を表示し、ngIfを使用して条件に基づいて5を含むか除外し、classバインドを使用してcssのスタイルクラスを切り替える
ステップ4:1、独立した多重化可能なtalentDetailComponent人材詳細コンポーネントを作成する2、属性バインディング構文で親コンポーネントtalentsComponentがサブコンポーネントTalentsDetailComponent 3を制御できるようにする@Inputデザイナでtalent人材属性を外部のtalentsComponentでバインディングできるようにする
ステップ5:1、データアクセスロジックをTalentServiceクラスに再構築する2、ルートインジェクタでTalentServiceをサービスを変更する仕入先に登録し、他のコンポーネントに注入できるようにする3、angular依存注入メカニズムを使用してコンポーネントに登録する4、TalentServiceでデータを取得する方法に非同期の関数署名を提供する5、Observableの発見、RxJsライブラリ6、RxJSのof()メソッドを使用して、シミュレーションされた人財データのオブザーバオブジェクトObservable 7を返し、コンポーネントngOnInitライフサイクルフックでTalentServiceメソッド8を呼び出し、クラス間で緩やかな結合通信を実現するためにMessageServiceを作成しました.
ステップ6:機能:1、1つのダッシュボードビューを追加する2、人材リストとダッシュボードビューの間をナビゲートする3、どのビューで1人の人材をクリックしても、その人材の詳細ページにナビゲートする4、メールの中で1つの深いリンクをクリックすると、直接1人の特定の人材の詳細ビューを開くAngularルータを追加してそれぞれの異なるコンポーネントの間で2をナビゲートして、あなたはいくつかのリンクとAppComponentをナビゲーション用のシェルコンポーネント3に変換し、AppRoutingModuleにルータ4を構成し、いくつかの単純なルーティングを定義し、1つのリダイレクトルーティングと1つのパラメトリックルーティング5を定義し、 要素にはrouterLink命令6が用いられ、1つの緊密に結合されたマスタをビューからルーティング付き詳細ビュー7に再構成し、ルーティングリンクパラメータを用いて選択された人材の詳細ビュー8にナビゲートし、複数のコンポーネント間でTalentServiceサービスを共有するを使って
ステップ7:機能:1、AngularのHttpClientを利用していくつかのデータ持続化特性を追加する2、TalentServiceはHTTPを通じて人材データを取得する3、ユーザーは人材を追加、編集、削除することができ、HTTPを通じてこれらの変更を保存する4、ユーザーは名前によって人材を検索することができるアプリケーションでHTTPを使用するための必須依存を追加した2、TalentServiceを再構築してweb APIで人材データをロードした3、TalentServiceを拡張してpost()、put()およびdelete()メソッドをサポートした4、コンポーネントを変更して、ユーザーが英雄を追加、編集および削除できるようにした5、メモリWeb API 6を構成し、「観察可能オブジェクト」の使用方法を習得した
採用管理の開始
一、人材募集管理1、プロジェクトの作成

ng new ngTalents

2、angular-in-memory-web-apiの追加作成が完了したら、package.jsonファイルでdependenciesを見つけて追加する

"@angular/upgrade": "^6.0.0-rc.5",
"angular-in-memory-web-api": "^0.6.0",

追加後cnpm install
3、二重括弧補間式を用いてデータapp.component.tsを表示する

title = '      ';

app.component.html自動作成テンプレートをクリア

{{title}}

src/styles.css共通スタイルの追加

h1 {
 color: #369;
 font-family: Arial, Helvetica, sans-serif;
 font-size: 250%;
}
h2, h3 {
 color: #444;
 font-family: Arial, Helvetica, sans-serif;
 font-weight: lighter;
}
body {
 margin: 2em;
}
body, input[text], button {
 color: #888;
 font-family: Cambria, Georgia;
}
* {
 font-family: Arial, Helvetica, sans-serif;
}

二、人財リストの作成1、人財リストの新規コンポーネントの作成

ng g component components/talents

app/components/talents/talents.component.ts「Mr.1」というヒーローを表すtalentプロパティを追加

talent='Mr.1'

talents.component.htmlカッコ補間式を使用してデータを表示

{{talent}}

app-talentsシェルコンポーネントAppComponent src/app/app.component.htmlに追加

{{title}}

2、人材は一人だけではなく、talentを作成し、idとname属性を追加する

ng g class talent

src/app/talent.ts idとname属性を追加します.コードは次のとおりです.

export class Talent {
    id:number;
    name:string;
}

3、talents.component.ts人材リストクラスへ、talentをインポートし、talent='Mr.1'src/app/components/talents/talents.component.ts修正後のコードを再構築する

import { Component, OnInit } from '@angular/core';
import { Talent } from '../../talent';

@Component({
selector: 'app-talents',
templateUrl: './talents.component.html',
styleUrls: ['./talents.component.css']
})
export class TalentsComponent implements OnInit {
// talent='Mr.1'
talent:Talent={
  id: 1,
  name: 'Mr.1'
};
constructor() { }

ngOnInit() {

}

}

4、人財ビューテンプレートtalents.component.htmlを修正する

      ：{{talent.name}}
   id :{{talent.id}}

UppercasePipeを使用してフォーマットすることもできます

   UppercasePipe      :{{ talent.name | uppercase }}

5、人材名を編集し、双方向データバインディングを使用してこのデータフローを自動化するには、フォーム要素とコンポーネントのtalent.name属性の間に双方向データバインディングを確立する必要があります.まず、app.module.tsをFormsModule app.module.tsにインポートします.

import { FormsModule } from '@angular/forms';

imports: [
   BrowserModule,
   FormsModule
 ],

人財リストsrc/app/components/talents/talents.component.htmlの変更

  
      ：
  

三、人材リスト1を表示し、mockで模擬人材データを作成する

ng g class mock-talents

人材talentをインポートし、シミュレーションデータmock-talents.tsコードを変更し、コードを次のように変更します.

import { Talent } from './talent';
export const TALENT:Talent[]=[
  { id: 1, name: 'Mr. 1' },
  { id: 2, name: 'Mr. 2' },
  { id: 3, name: 'Mr. 3' },
  { id: 4, name: 'Mr. 4' },
  { id: 5, name: 'Mr. 5' },
  { id: 6, name: 'Mr. 6' },
  { id: 7, name: 'Mr. 7' },
  { id: 8, name: 'Mr. 8' },
  { id: 9, name: 'Mr. 9' },
  { id: 10, name: 'Mr. 10' }
];

2、人財リストTalentsComponentクラスファイルにアナログ人財データを表示し、アナログデータTALENTS src/app/components/talents/talents.component.tsをインポートする

import { Component, OnInit } from '@angular/core';
import { Talent } from '../../talent';
import { TALENTS } from '../../mock-talents';//      

@Component({
  selector: 'app-talents',
  templateUrl: './talents.component.html',
  styleUrls: ['./talents.component.css']
})
export class TalentsComponent implements OnInit {
  // talent='Mr.1'
  talent:Talent={
    id: 1,
    name: 'Mr.1'
  };
  talents=TALENTS;//        talents   ，           ，    
  constructor() { }
  ngOnInit() {
  }
}

シミュレーションデータsrc/app/components/talents/talents.component.htmlをビューに表示

      

  
id {{talent.id}}   {{talent.name}}

シミュレーションデータにスタイルsrc/app/components/talents/talents.component.cssを追加

.selected {
    background-color: #CFD8DC !important;
    color: white;
  }
  .talents {
    margin: 0 0 2em 0;
    list-style-type: none;
    padding: 0;
    width: 15em;
  }
  .talents li {
    cursor: pointer;
    position: relative;
    left: 0;
    background-color: #EEE;
    margin: .5em;
    padding: .3em 0;
    height: 1.6em;
    border-radius: 4px;
  }
  .talents li.selected:hover {
    background-color: #BBD8DC !important;
    color: white;
  }
  .talents li:hover {
    color: #607D8B;
    background-color: #DDD;
    left: .1em;
  }
  .talents .text {
    position: relative;
    top: -3px;
  }
  .talents .badge {
    display: inline-block;
    font-size: small;
    color: white;
    padding: 0.8em 0.7em 0 0.7em;
    background-color: #607D8B;
    line-height: 1em;
    position: relative;
    left: -1px;
    top: -4px;
    height: 1.8em;
    margin-right: .8em;
    border-radius: 4px 0 0 4px;
  }

3、アナログデータバインドイベントに各人材にバインドイベント(click)=「onSelect(talent)」src/app/components/talents/talents.component.htmlを追加する

  
id {{talent.id}}   {{talent.name}}

クリックイベントメソッドsrc/app/components/talents/talents.component.tsを追加

selectedTalent:Talent;
 //     
  onSelect(talent:Talent):void{
    this.selectedTalent=talent;//                 selectedTalent  
  }

import { Component, OnInit } from '@angular/core';
import { Talent } from '../../talent';
import { TALENTS } from '../../mock-talents';//      

@Component({
  selector: 'app-talents',
  templateUrl: './talents.component.html',
  styleUrls: ['./talents.component.css']
})
export class TalentsComponent implements OnInit {
  // talent='Mr.1'
  talent:Talent={
    id: 1,
    name: 'Mr.1'
  };
  talents=TALENTS;//        talents   ，           ，    
  selectedTalent:Talent;//      Talent       selectedTalent,                  
  constructor() { }

  ngOnInit() {

  }
  //     
  onSelect(talent:Talent):void{
    this.selectedTalent=talent;//                 selectedTalent  
  }
}

4、詳細テンプレートを修正する*ngIf=「selectedTalent」を追加します.まだ人材が選択されていないためですが、バインド式はselectedTalent属性src/app/components/talents/talents.component.htmlを参照しています.

      

  
id {{talent.id}}   {{talent.name}}


      

  id ：{{selectedTalent.id}}
  
{{ selectedTalent.name | uppercase }}
  

    
        : 
    
  

5、選択した人材にスタイルsrc/app/components/talents/talents.component.htmlを追加する

四、親子コンポーネント1、人財リストの分離と選択した人財詳細、新しい人財詳細コンポーネントの作成

ng g component components/talent-detail

人材リストtalents.component.htmlのリストの詳細をsrc/app/components/talent-detail/talent-detail.component.htmlにコピー

    

  id ：{{selectedTalent.id}}
  
{{ selectedTalent.name | uppercase }}
  

    
        : 
    
  

さらにselectedTalentを@Input()talent:Talent;(talent)に変更し、修正コードは以下の通りです.

    

  id ：{{talent.id}}
  
{{ talent.name | uppercase }}
  

    
        : 
    
  

2、サブコンポーネントは親コンポーネントを受け入れ、人材Talentを導入し、@Inputデザイナsrc/app/components/talent-detail/talent-detail.component.tsを追加する

import { Component, OnInit,Input} from '@angular/core';
import { Talent } from '../../talent';

@Component({
  selector: 'app-talent-detail',
  templateUrl: './talent-detail.component.html',
  styleUrls: ['./talent-detail.component.css']
})
export class TalentDetailComponent implements OnInit {
  @Input() talent:Talent;//        
  constructor() {}

  ngOnInit() {
  }
}

3、親コンポーネント使用サブコンポーネントapp-talent-detail

五、Angularにおけるサービス1、データにアクセスするためのサービスの作成

ng g service services/talent

angularでは矢印関数が多く使われていますので、矢印関数を参照してくださいhttps://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Functions/Arrow_functions
2、リモートサービスデータ要求に使用できないデータの同期取得TalentとTALENTS src/app/services/talent.service.tsのインポート

import { Injectable } from '@angular/core';
import { Talent } from '../talent';
import { TALENTS } from '../mock-talents';//      
//         ，         
// Angular HttpClient        RxJS   Observable
//  Observable      
import { Observable, of } from 'rxjs';

//@Injectable()    
@Injectable({
  //                
  // providedIn        'root'
  providedIn: 'root'
})
export class TalentService {
  constructor() { }
  //       
 getTalents(): Talent[]{//       
 return TALENTS;
 }
}

人財リストの変更、インポートシミュレーションデータの削除、TalentService src/app/components/talents/talents.component.tsのインポート

import { Component, OnInit } from '@angular/core';
import { Talent } from '../../talent';
// import { TALENTS } from '../../mock-talents';//      
//         
import { TalentService } from '../../services/talent.service';

@Component({
 selector: 'app-talents',
 templateUrl: './talents.component.html',
 styleUrls: ['./talents.component.css']
})
export class TalentsComponent implements OnInit {
 // talents=TALENTS;//        talents   ，           ，    
 selectedTalent:Talent;//      Talent       selectedTalent,                  
 talents:Talent[];
 constructor(private talentService:TalentService) { }

 ngOnInit() {
   this.getTalents();// ngOnInit           getHeroes()
 }
 //     
 onSelect(talent:Talent):void{
   this.selectedTalent=talent;//                 selectedTalent  
 }
 getTalents():void{
   // this.talentService.getTalents().subscribe(talents=>this.talents=talents);
   //talentService.getTalents();        
   //         ，         
   //talentService.getTalents()         
   //        ，     Promise（  ），      Observable（     ）
   //  HttpClient.get()       , HttpClient.get()   Observable
   //Observable RXJS      
   // Angular HttpClient        RxJS   Observable  of  
   //       
   this.talents=this.talentService.getTalents();//getTalents  TALENTS    
 }
}

3、非同期でデータを取得し、ObservableでTalentとTALENTS src/app/services/talent.service.tsをインポートする

import { Component, OnInit } from '@angular/core';
import { Talent } from '../../talent';
// import { TALENTS } from '../../mock-talents';//      
//         
import { TalentService } from '../../services/talent.service';

@Component({
  selector: 'app-talents',
  templateUrl: './talents.component.html',
  styleUrls: ['./talents.component.css']
})
export class TalentsComponent implements OnInit {
  // talents=TALENTS;//        talents   ，           ，    
  selectedTalent:Talent;//      Talent       selectedTalent,                  
  talents:Talent[];
  constructor(private talentService:TalentService) { }

  ngOnInit() {
    this.getTalents();// ngOnInit           getHeroes()
  }
  //     
  onSelect(talent:Talent):void{
    this.selectedTalent=talent;//                 selectedTalent  
  }
  getTalents():void{
    // this.talentService.getTalents().subscribe(talents=>this.talents=talents);
    //talentService.getTalents();        
    //         ，         
    //talentService.getTalents()         
    //        ，     Promise（  ），      Observable（     ）
    //  HttpClient.get()       , HttpClient.get()   Observable
    //Observable RXJS      
    // Angular HttpClient        RxJS   Observable  of  
    //       
    // this.talents=this.talentService.getTalents();//getTalents  TALENTS    
    //  Observable             
    //subscribe       
    this.talentService.getTalents().subscribe(talents=>this.talents=talents);
    //Observable.subscribe()        
    
  }

}

4、表示メッセージ作成表示メッセージ

ng g component messages