如何绕过Angular 2中的路由器

【问题标题】：How to bypass router in Angular 2如何绕过Angular 2中的路由器
【发布时间】：2017-04-26 13:59:58
【问题描述】：

我们有一些模板文件及其组件。他们也有他们的路线定义和调用：

<a routerLink="/Path-with-component"> Open page with component </a>

我们还有普通和静态 .html 文件，严格来说不需要任何逻辑。所以，我们这样称呼它们：

<a href="Static-page.html">Open static page</a>

它们总是经过路由器，并且文件不是从物理路径调用的。

所以，我们需要它们不要通过 Angular 2 路由器。我们如何做到这一点？

【问题讨论】：

在路径href="/Static-page.html"前添加反斜杠

标签： javascript html angular angular2-routing angular2-template

【解决方案1】：

理想情况下它不应该通过路由器，除非你定义了一个 wild char 路由。

{ path: '**',  component: <some component>}

@Component({
  selector: 'my-app',
  template: `<h1>Hello {{name}}</h1>
  <hr />
    <a routerLink="/home" >Home</a>
    <a href='test.html'  >Static page</a>
  <hr />
  <router-outlet></router-outlet>
  `
})
class AppComponent { name = 'Angular'; }

@Component({
  template: `<h1>Home</h1>
  `
})
class HomeComponent { }

const appRoutes: Routes = [
  { path: '',   redirectTo: '/home', pathMatch: 'full' },
  { path: 'home',  component: HomeComponent }
];

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

查看Plunker

希望这会有所帮助！

【讨论】：