angular - 有没有像我们在 Ionic 3 中那样在 Angular 6 中推送导航的类似方法？

Question

我正在尝试导航到 Angular 6 中的不同页面。

在 Ionic 中，我们通过调用 navCtrl.push('ExamplePage');

在 Angular 6 中，我知道它们是路线，但我无法使用如下按钮进行导航:

app.component.html

<button (click)='goToExamplePage()'>ExamplePage</button>

<router-outlet></router-outlet>

app.component.ts

import {Router} from '@angular/router';
constructor(private router: Router)

goToExamplePage(){
    this.router.navigate(['/example'])
}

app.module.ts

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

 const appRoutes: Routes = [
  {path: '', component: AppComponent},
  { path: 'example',     component: ExampleComponent }
];

@NgModule({
  declarations: [
    AppComponent,
    ExampleComponent
  ],
  imports: [
    RouterModule.forRoot(
      appRoutes,
      { enableTracing: true } // <-- debugging purposes only
    )
   ...
  ],
  bootstrap: [AppComponent],
  exports: [
    RouterModule
  ]
})

它根本不做任何事情。有什么帮助吗？

Answer 1

对于那些仍然带着问题来到这里的人。这是手动导航到路线的正确方法。

上面的问题是AppComponent是bootstrap组件以及根路由('/')组件。你没有看到无穷无尽的嵌套模板的原因是 Angular 只使用外部 <router-outlet/> .

这是一个基本的手动导航示例 https://stackblitz.com/edit/angular-ivy-pykkry .编辑应用，将应用组件添加为根路由，查看效果。