Question

这是我的创建页面，我正在将数据推送到我的Firebase中。数据保存在Firebase上。有一个保存按钮，当我单击保存时，保存应导航到我的详细信息页面

这是我的create.page.ts文件

import { Component, OnInit } from '@angular/core';
import * as firebase from 'Firebase';
import { ActivatedRoute, Router  } from '@angular/router';
import { FormControl, FormGroupDirective, FormBuilder, FormGroup, 
NgForm, Validators, FormArray } from '@angular/forms';


@Component({
selector: 'app-create',
templateUrl: './create.page.html',
styleUrls: ['./create.page.scss'],
})
export class CreatePage implements OnInit {


ref = firebase.database().ref('infos/');
infoForm: FormGroup;

constructor(private route: ActivatedRoute,
public router: Router,
private formBuilder: FormBuilder) {
  this.infoForm = this.formBuilder.group({
    'info_title' : [null, Validators.required],
    'info_description' : [null, Validators.required]
  });
 }

 saveInfo() {
  let newInfo = firebase.database().ref('infos/').push();
  newInfo.set(this.infoForm.value);
  this.router.navigate(['/detail/'+newInfo.key]);
 }




 ngOnInit() {
 }

 }

这是我的detail.page.ts，在单击保存在创建页面上的该页面后，该页面应在其中显示数据。

import { Component, OnInit } from '@angular/core';
import * as firebase from 'Firebase';
import { ActivatedRoute, Router  } from '@angular/router';

@Component({
selector: 'app-detail',
templateUrl: './detail.page.html',
styleUrls: ['./detail.page.scss'],
})
export class DetailPage implements OnInit {

info = {};

constructor(private route: ActivatedRoute,
public router: Router) {
 firebase. database().ref('infos/'+this.route.snapshot.paramMap.get('key')).o 
n('value', resp => {
    this.info = snapshotToObject(resp);
  });


  }

  ngOnInit() {
  }

  }

export const snapshotToObject = snapshot => {
let item = snapshot.val();
item.key = snapshot.key;

return item;
}

我的路由文件app-routing.module.ts文件

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

const routes: Routes = [
{
path: '',
redirectTo: 'tabs',
pathMatch: 'full'
},

{path: 'list',loadChildren: './list/list.module#ListPageModule'},
{ path: 'login', loadChildren: './login/login.module#LoginPageModule' },
{ path: 'register', loadChildren: 
'./register/register.module#RegisterPageModule' },
{ path: 'tabs', loadChildren: './tabs/tabs.module#TabsPageModule' },
{ path: 'create', loadChildren: './create/create.module#CreatePageModule' 
},
{ path: 'detail', loadChildren: './detail/detail.module#DetailPageModule' 
},


];

@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule {}

Answer 1

在路由文件中添加参数：

...
{ path: 'detail/:key', loadChildren: './detail/detail.module#DetailPageModule' 
    },
...

角度-错误-无法匹配任何路由（URL段）

1 个答案: