角度+ルーティング研究（4つ）のサブ研究経路

新しい危機センターappディレクトリのフォルダ/ディレクトリの下に

コマンドを使用して、新しいルートと部品

// 新しいディレクトリ危機センタールーティングコンポーネントで 
NG Module1の危機センターG /危機中心--module --flat --routing //は新しいコマンドのようなディレクトリサービス内のコンポーネントであってもよい 
。<ディレクトリ名NGのG成分> / <名> @ ;成分危機センターGのNG /危機中心すなわち危機中央アセンブリディレクトリに新たな危機センター：例えば// この方法にも対応する端末のディレクトリを入力するために使用することができます作成し
たCD SRC /アプリケーション/ crisis- センター
コンポーネント危機NG Gビジネスセンターテニス

現在のディレクトリツリー構造（サービスは、2つのNGのグラムサービス危機-センター/ <名前>によって作成することができます）

それは危機center.component.htmlにプレースホルダを挿入するように、主要コンポーネント、モジュールの親/即ちトップ本明細書において危機center.component;ルート、第一変形モジュールの正面を構成する前に。

<H2> 
    危機センター
 </ H2> 
<ルータ-アウトレット> </ルータ、アウトレット>

コンポーネントは、ルーティングモジュールは、作成された、作成された、次のステップでは、ルーティングを設定します

{} NgModuleインポートから'@角度/コア' ; 
{RouterModuleからのルート、}インポート '@角/ルーター' ; 

からインポートCrisisCenterComponent {} './crisis-center/crisis-center.component' ; 
インポート}から{CrisisCenterHomeComponent './crisis-center-home/crisis-center-home.component' ; 
からインポートCrisisDetailComponent {} './crisis-detail/crisis-detail.component' ; 
からインポートCrisisListComponent {}」./crisis-list/crisis -list.component ' ; 

// モジュールのCrisisCenterComponent本体、すなわち、親のルーティングなど、サブ経路子供によって定義
// 理解：ローカルホスト：4200 /危機センターパスの親コンポーネントは、コンポーネントがCrisisCenterComponentに対応します
@localhost：4200 /危機センター/ 「」 表示サブアセンブリCrisisListComponentにおけるルータ出口
// localhostを：4200 /危機センター/ 「」 /「」サブ経路CrisisListComponent即ち、CrisisCenterHomeComponentに対応する
// localhostを：4200 /危機-center /「」/ 1 CrisisListComponentすなわちサブ経路、対応CrisisDetailComponent 

// トップので、パスはと/ルートに適用し始め、副経路は、親のルーティング経路に基づいて延長される
// ルーティングようツリーの深さの各ステップ、対応するパスを維持するためにバック/シンボルにルーティングパスを追加する必要がある; 
// それが空の場合、添加なし/記号; 
// ので、上記CrisisCenterHomeComponentに移動するためには、ローカルホストです。 4200 /危機中心が（ ''シンボルの前/省略）
// CrisisDetailComponentに移動は、localhost：4200 /危機センター/ 1。 
CONSTのcrisisCenterRoutes：ルートを= [ 
  { 
    パス： '危機センター'成分：CrisisCenterComponent、子供：[ 
      {パス： '' 、成分：CrisisListComponent、子供：[ 
        {パス： '：ID' 、成分：CrisisDetailComponent}、
        {パス： '' 、成分：CrisisCenterHomeComponent} 
      ]} 
    ] 
  } 
]。


@NgModule（{ 
  輸入：[RouterModule.forChild（crisisCenterRoutes）]、
  輸出：[RouterModule] 
}）
エクスポートクラスCrisisCenterRoutingModule {}

ルーティング設定が完了した後、モジュールをAppModuleに導入されます。

公式テキストは、ビューおよび組立方法の両方が同じである、すなわち、危機のヒーローにディレクトリ内のファイルをコピーしている。それでも白ピットである;ので、ここでコードを投稿します：
ルーティング構成は、ポイントCrisisListComponentアセンブリをするときの空気経路を知ることができます。

<ul class="crises">
        <li *ngFor="let crisis of crises$ | async"
          [class.selected]="crisis.id === selectedId">
          <a [routerLink]="[crisis.id]">
            <span class="badge">{{ crisis.id }}</span>{{ crisis.name }}
          </a>
        </li>
      </ul>
    <!-- 子路由视图占位 -->
 <router-outlet></router-outlet>

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

import { CrisisService } from '../crisis.service';
import { Crisis } from '../crisis';
import { Observable } from 'rxjs';
import { switchMap } from 'rxjs/operators';

@Component({
  selector: 'app-crisis-list',
  templateUrl: './crisis-list.component.html',
  styleUrls: ['./crisis-list.component.css']
})
export class CrisisListComponent implements OnInit {
  crises$: Observable<Crisis[]>;
  selectedId: number;

  constructor(
    private service: CrisisService,
    private route: ActivatedRoute
  ) { }

  ngOnInit() {
    this.crises$ = this.route.paramMap.pipe(
      switchMap(params => {
        this.selectedId = +params.get('id');
        return this.service.getCrises();
      })
    );
  }
}

cirisis-detail组件视图

<h2>crisisES</h2>
<div *ngIf="crisis$ | async as crisis">
  <h3>"{{ crisis.name }}"</h3>
  <div>
    <label>Id: </label>{{ crisis.id }}</div>
  <div>
    <label>Name: </label>
    <input [(ngModel)]="crisis.name" placeholder="name"/>
  </div>
  <p>
    <button (click)="gotoCrises(crisis)">Back</button>
  </p>
</div>

import { switchMap } from 'rxjs/operators';
import { Component, OnInit, Input } from '@angular/core';
import { Router, ActivatedRoute, ParamMap } from '@angular/router'; // 导入类
import { Observable } from 'rxjs';

import { Crisis } from '../crisis';
import { CrisisService } from '../crisis.service';

@Component({
  selector: 'app-crisis-detail',
  templateUrl: './crisis-detail.component.html',
  styleUrls: ['./crisis-detail.component.css']
})
export class CrisisDetailComponent implements OnInit {

  crisis$: Observable<Crisis>; //声明
  // 服务注入
  constructor(
    private router: Router,
    private activatedRoute: ActivatedRoute,
    private crisisService: CrisisService
  ) { }

  ngOnInit() {
    // ActivatedRoute服务来处理路由的路径和参数；这里接收路由参数ID，获取关联数据
    // paramMap; 一个Observable, 包含当前路由的必要参数和可选参数组成的map对象；当这个map值变化，可以使用get(name)获取id参数；然后crisisService获取相关id对应的数据并返回；
    // switchMap(); 可以取消以前未完成的请求，即发起新ID获取请求时，而service还在接收之前id对应的数据时，switchMap 可以放弃老请求而返回新id 的请求数据；
    this.crisis$ = this.activatedRoute.paramMap.pipe(
      switchMap((params: ParamMap) =>
        this.crisisService.getCrisis(params.get('id')))
    );

  }
  // 使用相对路径导航，需要提供当前的ActivatedRoute,让路由器知道当前处于路由树的位置
  // 使用： 链接参数数组后，添加relativeTo属性，并设置为当前的ActivatedRoute
  gotoCrises(crisis: Crisis) {
    let crisisId = crisis ? crisis.id : null;
    this.router.navigate(['../', { id: crisisId, foo: 'foo' }], { relativeTo: this.activatedRoute }); // 相对路由跳转；
  }

}

crisis.service

import { BehaviorSubject, Observable, of } from 'rxjs';
import { map } from 'rxjs/operators';

import { Injectable } from '@angular/core';
import { MessageService } from '../message.service';
import { Crisis } from './crisis';
import { CRISES } from './mock-crises';

@Injectable({
  providedIn: 'root',
})
export class CrisisService {

  constructor(private messageService: MessageService) { }

  getCrises(): Observable<Crisis[]> { // 获取列表数据
    // TODO: send the message _after_ fetching the heroes
    return of(CRISES);
  }
  
  getCrisis(id: number | string) {
    return this.getCrises().pipe(
      map(crises => crises.find(crisis => crisis.id === +id))
    );
  }

}

主要用到现在两个组件，CrisisCenterHomeComponent 组件是在为空的情况下显示；有图可以方便理解；

角度+ルーティング研究（4つ）のサブ研究経路

おすすめ