我无法在Angular中使用Route，请咨询

Question

我无法在Angular中使用Route，请咨询

Exo*_*Kid 0 routes visual-studio angular

我学习Angular并有一个小问题。如果我像这样将Component放入我的app.component.html中，就可以了，

<body>
   <div class="container">
    <app-search-books></app-search-books>
  </div>
</body>

Run Code Online (Sandbox Code Playgroud)

但是如果我这样配置app-routing.module.ts：

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

import { SearchBooksComponent } from './search-books/search-books.component';

const routes: Routes = [
  { path: 'search', component: SearchBooksComponent }
];

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

Run Code Online (Sandbox Code Playgroud)

那什么也没发生我错过了什么？

这是文件夹search-books / search-books.component.ts中的search-books.component.ts

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

@Component({
  selector: 'app-search-books',
  templateUrl: './search-books.component.html',
  styleUrls: ['./search-books.component.scss']
})
export class SearchBooksComponent implements OnInit {

  constructor() { }

  ngOnInit() {
    let isDone: boolean = false;
  }
}

Run Code Online (Sandbox Code Playgroud)

Answer 1

skd*_*oid 8

替换<app-search-books></app-search-books>为<router-outlet></router-outlet>

文档链接

注意：替换后，您将获得BLANK屏幕，因为您没有定义根Route。

定义根路由

const routes: Routes = [
  { path: '', redirectTo: '/search',  pathMatch: 'full'},
  { path: 'search', component: SearchBooksComponent }
];

Run Code Online (Sandbox Code Playgroud)

另外，您可以定义通配符路由，即，如果您导航不存在的任何页面，它将重定向到已定义的组件。

{ path: '**', redirectTo: '/search',  pathMatch: 'full'}

Run Code Online (Sandbox Code Playgroud)

您还应该考虑为意外的路由添加“通配符”路由，否则，例如在尝试访问路由doesNotExist时，您将再次出现空白屏幕：{path：'**'，redirectTo：'/ search'} (2认同)

归档时间：	6 年，11 月前
查看次数：	44 次
最近记录：	6 年，11 月前