Question

我是Angular的新手，我正在尝试了解如何在我的基本角应用中访问Urls中的id值，例如/ page / 34和/ page / 65。我创建了一个新的应用程序，还有一个组件＆＃34; PageComponent＆＃34;。这是我的代码：

//app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { PageComponent } from './page/page.component';
import { RouterModule, Routes } from '@angular/router';

const appRoutes: Routes = [
  { path: 'page/:id', component: PageComponent }
];

@NgModule({
  declarations: [
    AppComponent,
    PageComponent
  ],
  imports: [
    BrowserModule,
    RouterModule.forRoot(
      appRoutes
    )
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

//page.component.ts

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

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

  constructor(
    private route: ActivatedRoute,
    private router: Router
  ) {}

  ngOnInit() {
    this.route.params.subscribe(params => {
      console.log(params);
    });
  }

}

我用＆＃34; ng serve＆＃34;来测试应用程序并打开http://localhost:4200/page/878之类的网页。但在控制台中，我看到的只是{}。即，似乎params数组是空的。

非常感谢任何帮助。

Answer 1

确保在角度应用根组件中使用路由时在根组件中添加路由器插座（即app.component.ts）

<router-outlet></router-outlet>

无法在Angular app

1 个答案: