当routerLink包含数据时，路由不起作用

由 发布于 angularjavascript
 收藏

我是Angular的新手，正在学习通过路由传递id时路由的工作方式。 我无法路由到在app.module.ts中添加的组件 附加我的组件html代码和app.module.ts

HomeCoponent.html

<div class="container">

<div class="rows">

    <div *ngFor="let blog of blogData">


        <div class="card border-primary col-md-5 card-layout">
            <!-- <img class="card-img-top" src="image1.jpg" alt="Card image cap"> -->
            <div class="card-body ">
                <h5 class="card-title text-primary">{{blog.title}}</h5>

                <p class="card-text">{{blog.description}}</p>
                <br>

                <a [routerLink]="['/blog',blog.blogid]" class="btn btn-primary btn-block">View</a>
            </div>


        </div>

    </div>
</div>
<router-outlet></router-outlet>

沼泽视图component.ts：

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { RouterModule } from '@angular/router';
@Component({
  selector: 'app-blog-view',
  templateUrl: './blog-view.component.html',
  styleUrls: ['./blog-view.component.css']
})

export class BlogViewComponent implements OnInit {


  constructor(private _route: ActivatedRoute, private router: Router) {
    console.log('constructor is called');
  }

  ngOnInit(): void {
    console.log(this._route.snapshot.paramMap.get('blogid'))



  }

}

app.module.ts

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

import { RouterModule, Routes } from '@angular/router';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
import { BlogViewComponent } from './blog-view/blog-view.component';
import { BlogCreateComponent } from './blog-create/blog-create.component';
import { BlogEditComponent } from './blog-edit/blog-edit.component';
import { NotFoundComponent } from './not-found/not-found.component';


@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
    BlogViewComponent,
    BlogCreateComponent,
    BlogEditComponent,
    NotFoundComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    RouterModule.forRoot([
      { path: 'home', component: HomeComponent },
      { path: 'create', component: BlogCreateComponent },
      { path: '**', component: NotFoundComponent },
      { path: 'blog/:blogid', component: BlogViewComponent }
    ])
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

我肯定在这里想念什么。请帮忙

评论