标签: angular-routing

我正在尝试实现一个带有登录页面的应用程序，然后当用户登录时，会有一个导航栏、工具栏和 sidenav 带有router-outlet.

基本上，在app.component.html我有一个定义：

<div *ngIf="isAuthenticated">
    <app-custom-navbar></app-custom-navbar>
    <app-custom-toolbar></app-custom-toolbar>
    <app-custom-sidenav></app-custom-sidenav>
</div>

<router-outlet></router-outlet>

我有这个路由：

const routes: Routes = [
    { path: '', canActivate: [AuthenticationGuard], component: HomeComponent },
    { path: 'login', component: LoginComponent },
    { path: 'data', canActivate: [AuthenticationGuard], component: DataComponent },
    { path: 'projects', canActivate: [AuthenticationGuard], component: ProjectsComponent },
];

因此，这很有效，如果用户未通过身份验证，他将被重定向到/login.

问题是，当他通过身份验证时，sidenav 组件占据了整个空间，然后其他组件就看不到了。

基本上这是问题：

<mat-sidenav-container class="sidenav-container">
  <mat-sidenav>

    <!-- sidenav template... -->

  </mat-sidenav>
  <mat-sidenav-content>

   <!-- how can I put my content here and use routing at the …

最近我听说了一个名为onSameUrlNavigation的属性，您可以在其中将其设置为“重新加载”。我在谷歌上搜索过它，但没有多少文章展示了该属性的使用。有人可以帮助我提供一个实时示例，说明我们究竟需要在哪里使用该属性。

@ngModule({
 imports: [RouterModule.forRoot(routes, {onSameUrlNavigation: ‘reload’})],
 exports: [RouterModule],
 })

当我为 Angular 应用程序编写 Cypress e2e 测试时，我经常使用这样的visit()命令：

.visit('/foo/bar')

这样就完成了工作，即 Cypress 导航到/foo/bar，但整个应用程序会重新加载。这非常慢，并且不会模仿实际的用户行为。

是否可以在不重新加载整页的情况下导航/访问 Angular 应用程序？

我确实尝试过：

cy.window().then((win) => {
   win.history.pushState({}, '', '/foo/bar')
})

但是 angular 对此没有反应。

我使用 angular 9 并且我想做延迟加载 app-routing

{
    path: '', loadChildren: () => import("./components/login/login.module")//.then(m =>
     // m.LoginModule)
  }

在我创建登录模块之后：

@NgModule({
    declarations: [LoginComponent],
    imports: [
        CommonModule,
        FormsModule,
        LoginModuleRouting

    ],
    providers:[]
})
export class LoginModule { }

和路由：

const routes: Routes = [
  {
    path: '', component: LoginComponent,

  }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})


export class LoginModuleRouting { }

问题是，当我打电话ng serve并继续访问 ` http://localhost:4200/ 时，我得到了这个异常：

core.js:6237

 ERROR Error: Uncaught (in promise): Error: ASSERTION ERROR: NgModule '[object Module]' is not a …

目标

在不失去理智的情况下使路由工作.

错误

Error: Can't resolve all parameters for Router: (?, ?, ?, ?, ?, ?, ?, ?)

app.routing.ts

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

import { NavbarComponent } from './navbar/navbar.component';
import { CustomerComponent } from './customer/customer.component';

export const appRoutes: Routes = [
    { path: '', redirectTo: 'customers', pathMatch: 'full' },
    { path: 'customers', component: CustomerComponent },
];

export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);

app.module.ts

import { NgModule } from '@angular/core';
import { …

如果没有找到数据,angular.io上的示例中的resolve方法返回一个promise或将应用程序导航到特定路由.

resolve(route: ActivatedRouteSnapshot): Promise<any> {
let id = +route.params['id'];
return this.cs.getCrisis(id).then(crisis => {
  if (crisis) {
    return crisis;
  } else { // id not found
    this.router.navigate(['/crisis-center']);
    return false;
  }
});
}

假设,getCrisis函数返回一个observable:

resolve(route: ActivatedRouteSnapshot): Observable<any> {
  let id = +route.params['id'];
  return this.cs.getCrisis(id).take(1)
}

在可观察的情况下.我怎么知道,没有任何回报,因为我正在处理流？在resolve函数中处理这种情况的最佳模式是什么？

我知道,我可以从组件中使用router.navigate方法,但是想要正确使用路由器解析防护.

我正在使用angular2路由.当用户在搜索字段中重新输入值并单击搜索时,需要重新加载相同的组件,但具有不同的路由参数.

<button (click)="onReload()">Search</button>

onReload() {
this.router.navigate(['results',this.location]);
}

这是我的ResultsComponent的路径路径

{ path:'results/:location', component:ResultsComponent}

此函数更改URL,但不会重新初始化组件.

在angularjs中,ui-router我可以像这样实现它.

$state.go($state.current, location, {reload: true});

我如何在angular4中执行此操作？

当我在` http:// localhost/overview '时,模块沿着这条路径加载:

http://localhost/app/modules/overview/overview.module.js

但是当我转向页面http://localhost/overview/users然后按F5(刷新页面)时,我收到错误:

Error: Unexpected token <
  Evaluating http://localhost/overview/app/modules/overview/overview.module

发生错误是因为URL不正确,他应该是这样http://localhost/app/modules/overview/overview.module.

如何让它正常工作？

这是项目结构:

这是systemjs tsconfig:

{
  "compileOnSave": true,
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "lib": [ "es2015", "dom" ],
    "noImplicitAny": false,
    "suppressImplicitAnyIndexErrors": true
  }
}

这是systemjs配置:

(function (global) {
    System.config({
        baseURL: "/",
        paths: {
            'npm:': '/node_modules/'
        },
        map: {
            app: 'app',

            '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
            '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
            '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
            '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
            '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
            '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
            '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
            '@angular/forms': …

我正在研究 Angular-6 项目。我的应用程序有很多子路由。其中之一如下：

  const routes: Routes = [
  {
    path: 'innovation-track/:innovation-track-id', component: InnovationTrackComponent,
    children: [
      {
        path: 'sprint', component: ScrumBoardComponent
      }
    ]
  }
];

我想从我的ScrumBoardComponent 中的URL获取创新轨道 ID值。

 constructor(private _route: ActivatedRoute) { }

 //somewhere in method     
   this._route.snapshot.parent.paramMap

this._route.snapshot.parent.paramMap

 this._route.params.<any parameter name>