angular - Angular2 & Firebase - URL パラメータに基づいてフォーム入力フィールドをプリロードする方法は?

Question

私が持っているもの

firebase リストからプロジェクトを表示するプロジェクトのリスト (この情報は、firebase のノードを参照するプロジェクトリストサービスから取得されます)
新しいプロジェクトを追加するためのフォーム - これにより、新しいデータを firebase に書き込むことができます。URL は次のようになります: url.com/projects/0/edit
プロジェクトをクリックすると、URL が追加されたプロジェクトの詳細ページが表示されます ( url.com/projects/-key123456 ) (これは、別の Firebase ノードを参照する別のサービスを参照します)
プロジェクトの詳細ページに編集ボタンがあります。これをクリックすると、URL は次のようになります: url.com/projects/-key123456/edit
要約すると、新しいアイテムを追加しても問題ありません。編集方法は後ほど書きます。選択したプロジェクトに基づいてフォームに事前入力する方法を知りたいだけです

達成方法がわからないこと

選択したプロジェクトに基づいて、編集フォームの入力フィールドに事前入力するにはどうすればよいですか?

ProjectEditComponent.html

<h2>
  projects-edit works!
</h2>


<input #newTitle type='text' placeholder='project title'/>
<input #newReference type='text' placeholder='project reference'/>
<input #newDate type='date' placeholder='project date'/>

<button (click)="submitForm(newTitle.value, newReference.value, newDate.value, newAuditorName.value, newCompanyName.value); newTitle.value=''; newReference.value=''; newDate.value=''; newAuditorName.value=''; newCompanyName.value=''"> 
  Save 
</button>

<a [routerLink]="['/projects']"> Cancel </a>

ProjectEditComponent.ts

import { Component, OnInit } from '@angular/core';
import * as firebase from 'firebase/app';
import { AuthService } from '../auth.service';
import { Router } from '@angular/router';

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

  constructor(
    private authService: AuthService,
    private router: Router
  ) { }

  ngOnInit() {
    
  }


  submitForm(title: string, reference: string, date: string, auditorName: string, newCompanyName: string) {


  }

}

どんな助けでも大歓迎です。

編集:以下は、種類 @msmolcic からの進行状況に基づく編集です!

ProjectEditComponent.ts

import { Component, OnInit } from '@angular/core';
import * as firebase from 'firebase/app';
import { AuthService } from '../auth.service';
import { Router } from '@angular/router';
import { ActivatedRoute, Params } from '@angular/router';

import { FormGroup, FormBuilder } from '@angular/forms';
import { ProjectResolver } from './projects-resolver.service';



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

  formName: FormGroup;

  constructor(
    private authService: AuthService,
    private router: Router,
    private activeRoute: ActivatedRoute,

    private formBuilder: FormBuilder
  ) { }



  ngOnInit(): void {
    this.activeRoute.data
      .subscribe(routeData => {
        // Notice that name of the field 'projectData' matches
        // the one you set as alias of the data resolved from
        // the ProjectResolver inside your routing module.
        let projectData = routeData.projectData;

        // Do whatever you want with project data...
        this.formName = this.formBuilder.group({
          // someProperty1 - name of the formControl
          // projectData.someProperty1 - value of your object property
          someProperty1: projectData.project_title
        });
      });


  }

  submitForm(title: string, reference: string, date: string, auditorName: string, newCompanyName: string) {}

}

ProjectsResolver.ts

私はこれまでにこれらのいずれかを作成したことがないので、愚かなことをお許しください (Angular を学習したのは 1 週間半だけです)。返されたデータをコメントアウトすると、ページが読み込まれ、ナビゲートできるようになります。戻り行を含めると、ページがエラーなしで壊れます。

import { Injectable } from '@angular/core';
import { AngularFireDatabase, FirebaseListObservable, FirebaseObjectObservable } from 'angularfire2/database';
import * as firebase from 'firebase/app';
import { Observable } from 'rxjs/Observable';
import { AuthService } from '../auth.service';
import { ActivatedRoute, Params, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';

@Injectable()

export class ProjectResolver {
    projectsDetails: FirebaseListObservable<any[]>;
    user: Observable<firebase.User>;
    userID;

    constructor(
        private database: AngularFireDatabase,
        private authService: AuthService,
    ) {
        this.authService.user.subscribe(user => {
            if (user) {
                this.userID = user.uid;
            } else {
                console.log('not signed in apparently');
            }
        });
    }

    resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
        // Notice that name of the parameter 'id' matches the /:id from routing module
        let projectId = route.params['projectId'];

        // Insert the correct fetch logic here, it will then return
        // data to the component after it's resolved.

        //return this.firebaseDb.getProjectById(projectId);
        //return this.projectsDetailsService.getProjectById(projectId);
       // 
       return this.database.list('/project/' + this.userID + '/' + projectId);

    }

}

ルーティング

// Modules
import { ModuleWithProviders }  from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

// Components
import { LoginPageComponent } from './login-page/login-page.component';
import { ProjectsListComponent } from './projects-list/projects-list.component';
import { ProjectsDetailsComponent } from './projects-details/projects-details.component';
import { ProjectsEditComponent } from './projects-edit/projects-edit.component';
import { IssuesListComponent } from './issues-list/issues-list.component';
import { IssuesDetailsComponent } from './issues-details/issues-details.component';

import { ProjectResolver } from './projects-edit/projects-resolver.service';



// Including const before declaring a property or variable makes something a constant. A constant is a value that other code in our application cannot change. It's a read-only reference that cannot be redefined.
const appRoutes: Routes = [ 
    { path:'login', component: LoginPageComponent },
    { path:'projects', component: ProjectsListComponent },
    { path:'projects/:projectId', component: ProjectsDetailsComponent },
    { path:'projects/0/edit', component: ProjectsEditComponent },
    { path:'projects/:projectId/edit', component: ProjectsEditComponent, resolve: { projectData: ProjectResolver } },
    { path:'projects/:projectId/i', component: IssuesListComponent },
    { path:'projects/:projectId/i/:issueId', component: IssuesDetailsComponent },
    { path: '', redirectTo: 'login', pathMatch: 'full' },
    { path: '**', redirectTo: 'login', pathMatch: 'full' }
];

// Next, our file needs to export our routes to the rest of the application
export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);

プロジェクト編集 HTML

<form [formGroup]="formName">
    <input type="text" formControlName="someProperty1" />
</form>

今後ともよろしくお願いいたします。より身近に感じられるようになりました！:)

angular - Angular2 & Firebase - URL パラメータに基づいてフォーム入力フィールドをプリロードする方法は?

2 に答える 2

Related

Reference