标签: angular-router

我有一个应用程序,显示一个联系人列表,能够选择单个联系人并查看其详细信息.联系人详细信息页面有几个选项卡,用于显示联系人的子信息(个人资料,接触点和联系信息).以下是相关网址:

要查看联系人列表:

• HTTP://本地主机:4200 /联系人/名单

查看给定联系人的所有接触点

• HTTP://本地主机:4200 /接触/ 84 /触摸点/表

以下是构建联系人列表路由的路由数据以及联系人详细信息的延迟加载路由:

    export const routing: ModuleWithProviders = RouterModule.forChild(
    [
        {
            path: 'list',
            component: PageContactListComponent
        },
        //... other routes here...
        {
            path: ':id',
            component: PageContactDetailComponent,
            children:
            [
                //... other routes here...
                //LAZY LOADED:
                { path: 'touch-points',     loadChildren: './detail/components/touch-points/touch-points.module#TouchPointModule' }             ]
        }
    ]);

这是触点模块的路由数据.

    export const routing:ModuleWithProviders = RouterModule.forChild(
    [   
        {
            path: '',
            pathMatch: 'full',
            redirectTo: 'list'
        },
        {
            path: 'list',
            component: TouchPointListComponent
        }
    ]);

当我导航到时http://localhost:4200/contact/list,Angular尝试加载与之关联的组件http://localhost:4200/contact/84/touch-points/list.它似乎这样做是因为'list'也在延迟加载的模块中定义.如果我在触摸点模块的路由数据中将"list"更改为"history",则http://localhost:4200/contact/list加载相应的组件.

Angular 4路由器应该能够区分这些路由:( …

基本上我现在有以下 Angular 模块：

1. landing
2. admin
3. core
4. shared

我想要的是注册一个在模块AuthenticationGuard内调用的新守卫shared，并在不同的模块中提供它。

目前，只有当我在landing-module( 这是我引导的) 中注册守卫时，它才起作用，而如果我在 或 中注册它，它也admin.module不起作用shared.module。

如果我这样做，我会收到一条错误消息，内容如下：

注册guard是通过providers相应模块的数组完成的。

我的目标是能够在所有模块中使用它。

core从模块内注入服务没有问题- 所以我认为两者admin之间一定存在差异？guardsservices

目前一些相关文件看起来像这样（为了简洁起见缩短了）：

登陆模块.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { HomeComponent } from './home/home.component';
import { LandingRoutingModule } from './landing.routing.module';

import { SharedModule } from '../shared/shared.module';
import { CoreModule } from '../core/core.module';
import { SecurityModule } from …

如果我尝试使用ng build --prod --aot构建我的Angular应用程序,我总是遇到此错误:

ERROR in : Illegal state: Could not load the summary for directive RouterOutlet in C:/Path-To-Project/node_modules/@angular/Router/router.d.ts.

如果我使用"ng serve"编译我的项目,我不会收到错误消息.我试图实现延迟加载的几个变种,但每个都导致错误.此外,我试图完全重建应用程序并遵守Angular的所有规范,但我总是回到这个错误消息的相同点.

我的package.json:

{
  "name": "Name",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build --prod",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^5.2.0",
    "@angular/common": "^5.2.0",
    "@angular/compiler": "^5.2.0",
    "@angular/core": "^5.2.0",
    "@angular/forms": "^5.2.0",
    "@angular/http": "^5.2.0",
    "@angular/platform-browser": "^5.2.0",
    "@angular/platform-browser-dynamic": "^5.2.0",
    "@angular/router": "^5.2.0",
    "core-js": "^2.4.1",
    "rxjs": "^5.5.6",
    "zone.js": "^0.8.19"
  },
  "devDependencies": …

在我的角度路由模块中，我在默认主页时使用基本导航，现在在某些情况下，我想决定导航哪条路线。这就是我的应用程序路由的样子。

 { path: '', redirectTo: 'home1', canActivate: [homepageGuard], pathMatch: 'full' },
  { path: 'home1', loadChildren: './lazyloadedmodule1' },
  { path: 'home2', loadChildren: './lazyloadedmodule2' },
  { path: 'home3', loadChildren: './lazyloadedmodule3' },
  { path: 'basehome', loadChildren: './lazyloadedmodule4' }

现在在我的路线守卫中，我像这样调用订阅。

canActivate(): Observable<any> | boolean {
    return this._myService.getCurrentApp().subscribe(
      (r) => {
        if(r === 'app1'){
          //navigate to app1homepage
        } else if (r === 'app2') {
          //navigate to app2homepage
        } else {
          // navigate to base homepage
        }
      },
      (e) => {
        console.log(e);
        return false;
      }
    ); …

我在 Ionic 5 中有一个使用 Angular 的应用程序，我需要以编程方式从当前页面导航到上一页。我尝试使用：

this._location.back();

它可以工作，但不会像使用 导航一样触发后退导航动画<ion-back-button>，它只是切换页面。所以问题是如何以编程方式使用 Angular 在 Ionic 5 应用程序上导航，类似于什么<ion-back-button>？

import {Router, ActivatedRouteSnapshot, RouterStateSnapshot, UrlTree} from '@angular/router';

@Injectable({provideIn: 'root'})
export class FooGuard implements CanActivate {
  constructor (private readonly router: Router) {}

  canActivate (next: ActivatedRouteSnapshot, state: RouterStateSnapshot): Promise<UrlTree> {
    const xxx = myMagic(next); // irrelevant app logic that depends on next url only

    return (async () => this.router.parseUrl(xxx));
  }
}

试图找到一个没有一页额外样板的测试代码示例。希望每个模拟可以有接近 5-6 行代码。需要：

• 模拟Router
• 模拟ActivatedSnapshot