3

私はこのチュートリアルに沿ってangular 2を学び[Build an application with Angular 2 and Firebase][1]、それを拡張しようとしています。しかし、複数のルートをネストしようとすると、問題が発生しました。

アプリの構造:

Goals – (has router-outlet)
 > Single Goal with Experiments list – (has router-outlet)
  > Single Experiment – (has router-outlet)
   > Experiment Notes

ルーターのセットアップ:

export const routerConfig : Route[] = [
  {
    path: 'goals',
    children: [
      {
        path: ':id', component: SingleGoalComponent,
        children: [
          {
            path: 'experiments',
            children: [
              { path: ':id', component: ExperimentDetailsComponent,
                children: [
                  { path: '', redirectTo: 'notes', pathMatch: 'full' },
                  { path: 'notes', component: ExperimentNotesComponent }
                ]
              },
              { path: 'new', component: NewExperimentComponent },
              { path: '' }
            ]
          },
          { path: '', redirectTo: 'experiments', pathMatch: 'full' }
        ]
      },
      { path: '', component: GoalsComponent }
    ]
  },
  { path: 'notes', component: NotesComponent },
  { path: '', redirectTo: 'goals', pathMatch: 'full' },
  { path: '**', redirectTo: 'goals', pathMatch: 'full' }
];

問題

Experiment List のExperiment 1をクリックするgoals/1/experiments/1/notesと、正しい URL に到達し、正しいExperiment 1 の Notesが表示されます。

その後、Experiment ListのExperiment 2をクリックするとgoals/1/experiments/2/notes、URL は正しく、Experiment の詳細は正しいのですが、メモはまだExperiment 1 の Notes のままです。

次にブラウザーを更新すると、Experiment 2が読み込まれ、メモは正しいExperiments 2 のメモになります。

これはexperimentId、メモを取得するための を取得する方法です

実験ノート.component.ts

experimentId: string;
  goalId: string;

  constructor(
    private router: Router,
    private route: ActivatedRoute,
    private experimentsService: ExperimentsService,
    private _location: Location) { }

  ngOnInit() {

    Observable.combineLatest(this.route.parent.params, this.route.parent.parent.params)
      .forEach((params: Params[]) => {
        this.experimentId = params[0]['id'];
        this.goalId = params[1]['id'];
      });

    console.log('Experiment ID: ' + this.experimentId + '| Goal Id: ' + this.goalId);

    this.notes$ = this.experimentsService.findAllNotesForExperiment(this.experimentId);

私が犯している明らかな間違いだと確信していますが、私の人生では、これのどこが間違っているのかわかりません.

4

3 に答える 3

2

これは、コンポーネントの作成中に ngOnInit() メソッドが1 回しか呼び出されないためです。実験 2 をクリックしても、新しい実験コンポーネントは作成されません。古いものを使うだけです。

ルート パラメータでまだサブスクライブしているため、URL が変更されています。しかし、あなたの Service 呼び出しは Observable の外にあります。そのため、サービス呼び出しを Obserable に入れるだけで、ルート パラメータが変更されるたびに、新しいデータが読み込まれます。

ngOnInit() {

    Observable.combineLatest(this.route.parent.params, this.route.parent.parent.params)
      .forEach((params: Params[]) => {
        this.experimentId = params[0]['id'];
        this.goalId = params[1]['id'];

        console.log('Experiment ID: ' + this.experimentId + '| Goal Id: ' + this.goalId);
        this.notes$ = this.experimentsService.findAllNotesForExperiment(this.experimentId);
      });
于 2016-11-23T10:59:46.737 に答える