Question

要问我的问题，我将使用官方angular.io Heroes教程 作为示例。

（这是点6.Routing - Tutorial的结果。）

在控制台上执行 npm start 时，会加载AppComponent的HTML，但默认情况下也会加载/dashboard（当网址为{{1}时它会自动重定向到http://localhost:3000）。

我的问题是：当您引入http://localhost:3000/dashboard时，是否可以仅加载HTML AppComponent并且不会自动重定向到http://localhost:3000？

我尝试从 app.routing.ts
中删除
dashboard

但我得到的错误可能是{ path: '', redirectTo: '/dashboard', pathMatch: 'full' },。

官方的掠夺者是：https://angular.io/resources/live-examples/toh-5/ts/plnkr.html。

谢谢！

Answer 1

这只是因为你的路由器。如果您正确管理了应用程序，则可以先将其加载到组件中，然后选择在路由器插座中加载的组件。在这里，您只需要创建一个包含要加载的组件的路由，而不是重定向到另一个URL路由。

基本上，对于角度，网址在http://localhost:3000/之后开始，然后默认情况下，路径路径是＆＃39;＆＃39;除非你告诉路由器导航到特定网址。

您需要做类似的事情：

{ path: '', component: DashboardComponent },

在plunkr之后编辑：

更改plunkr中的这些代码部分，看看你的期望。

app.component.ts中的

<nav>
  <a routerLink="/" routerLinkActive="active">Dashboard</a>
  <a routerLink="/heroes" routerLinkActive="active">Heroes</a>
</nav>

app.routing.ts中的

const appRoutes: Routes = [
  {
    path: '',
    component: DashboardComponent
  },
  {
    path: 'detail/:id',
    component: HeroDetailComponent
  },
  {
    path: 'heroes',
    component: HeroesComponent
  }
];

正如我在第一个回答中所说，当你启动你的应用程序时，你会得到这个网址：＆＃34; http://localhost:3000/＆＃34;。您的第一个组件将加载时没有附加网址，这就是路径为空的原因。

{
  path: '',
  redirectTo: '/dashboard',
  pathMatch: 'full'
},

您的第一段代码告诉路由器重定向网址＆＃34; / dashboard＆＃34;当你在＆＃34; /＆＃34;网址。我只是将其更改为直接加载没有网址的组件仪表板。

{
  path: '',
  component: DashboardComponent
},

Answer 2

这是因为路由器插座用于 AppComponent 。当您运行应用程序时， AppComponent 会出现，因为它有路由器插座，它至少需要一个默认视图。在您的情况下，它是信息中心。

您尝试将其删除，因此您删除了默认设置路由。需要存在默认路由。如果删除它，角度路由器将抛出错误。

router-outlet不能为空。无论如何你必须提供一个视图。

因此，使用 AppComponent html视图，您还可以在 router-outlet 中获得其他视图。

所以你可以做的是

1）从 AppComponent 中删除 roter-outlet 。

2）从 AppComponent Code 尝试导航到仪表板路线。在代码的某处，让我们说在任何按钮点击事件，例如。 this.router.navigate['/dashboard']

Angular2 - 在＆＃34; /＆＃34;中加载AppComponent没有任何其他组件（英雄教程）

2 个答案: