Question

我似乎找不到找到特定页面的方法。

我的目的地是./book-list.component.html，由下面的组件装饰器管理：

import { Component, OnInit } from '@angular/core';
@Component({
  selector: 'app-book-list',
  templateUrl: './book-list.component.html',
  styleUrls: ['./book-list.component.css']
})
export class BookListComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {
  }

}

我从下面的goToBookList（）home.component.html触发事件：

<div class="activities btn-group-vertical">
    <a  class="btn btn-primary travels" href="#" role="button">Travels</a>
    <a class="btn btn-primary books" role="button" (click)="goToBookList()">Books</a>
    <a class="btn btn-primary restaurants" href="#" role="button">Restaurants</a>
    <a class="btn btn-primary movies" href="#" role="button">Movies</a>
</div>

我在home.component.ts控制器中实现了该方法：

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

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

  constructor(private router : Router) { }

  ngOnInit(): void {
  }

  goToBookList() : void {
    this.router.navigate(['/book-list']);
  }

}

我在我的app-routing.module.ts中注册了该路线：

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { BookListComponent } from './themes/lists/book-list/book-list.component';
const routes: Routes = [
  { path: 'home', component: HomeComponent },
  { path: '', redirectTo: 'home', pathMatch: 'full' },
  { path: 'book-list', component: BookListComponent },
];

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

我将AppRouting模块导入了app.module中：

@NgModule({

  imports: [
    BrowserModule,
    AppRoutingModule,
    MessageModule,
    HttpClientModule
  ],
  declarations: [
    AppComponent,
    HomeComponent,
    MessageComponent, 
    LoginComponent,
    BookListComponent

  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

重要的是，我尝试使用router-out占位符和router-link指令进行路由，并且运行良好：

<div class="activities btn-group-vertical">
    <a  class="btn btn-primary travels" href="#" role="button">Travels</a>
    <a class="btn btn-primary books" role="button" [routerLink]="['/book-list']">Books</a>
    <a class="btn btn-primary restaurants" href="#" role="button">Restaurants</a>
    <a class="btn btn-primary movies" href="#" role="button">Movies</a>
</div>

<router-outlet></router-outlet>

home.component.ts控制器似乎无法正常工作。

  goToBookList() : void {
    this.router.navigate(['/book-list']);
  }

有什么主意吗？

这是我第一次在这里发布信息，希望该信息易于理解和简洁；请随时提供反馈！

谢谢您的时间：）

如何使用“角路由”路由到其他页面？

0 个答案: