标签: angular-routing

遵循托德·莫托（Todd Motto）的优秀指南之一（https://toddmotto.com/dynamic-page-titles-angular-2-router-events），我遇到了一种我无法解释的情况。

这是一些代码：

this.router.events
    .filter((event) => event instanceof NavigationStart)
    .map(() => this.activatedRoute)
    .map((route) => {
        console.log('route pre-while: ', route); // Shows ActivatedRoute object
        console.log('pre-while route child: ', route.firstChild); // null
        while (route.firstChild) {
          console.log('while route: ', route);
          route = route.firstChild;
        }
        console.log('post while route: ', route);
        return route;
      })
    .subscribe((elem) => {
        console.log('elem: ', elem);
    });

在此代码块中，“route pre-while”日志语句在 Chrome 控制台中显示一个 ActivatedRoute 对象。如果我在 Chrome 的控制台窗口中展开该对象，我可以单击该firstChild属性并看到另一个ActivatedRoute对象，这正如我所期望的那样。然而，问题是，第二条日志语句“pre-while route child”输出null到控制台。此外，WHILE 循环永远不会执行，因为route.firstChild计算结果为null。谁能给我解释一下这是为什么？？？为什么我可以记录该对象并看到 a …

在我当前的项目中，我试图摆脱路由时跳过的 Angular 动画。在我的模板中，我在 css 网格布局中有不同的带有mat-card 的“小部件” ，我想让它们平滑地出现和消失。

我的子组件中的动画（路线指向的）看起来像

animations: [
  trigger('cardAnimation', [
    state('void', style({ opacity: 0, transform: 'scale(0.5)' })),
    state('*', style({ opacity: 1, transform: 'scale(1)' })),
    transition('void => *', animate('500ms ease-in')),
    transition('* => void', animate('500ms ease-in'))
  ])
]

简化后的模板如下所示

<mat-card @cardAnimation>
</mat-card>

<mat-card @cardAnimation>
</mat-card>

卡片会显示动画，但路线会直接更改为下一条路线，而无需等待动画。我还测试了animateChild()在query过渡内部使用，但这没有帮助。如何让路由器等待它们？

谢谢并欢呼！

我想以这样的方式实现路由：如果您单击下拉列表，它就会转到该特定页面。但我希望在路由到其他组件时保留标头。它会转到特定的 url，但不显示内容。我尝试过子路由，但它似乎不起作用。

上图是下拉菜单的样子。它有以下网址

本地主机:4200/正文

当我单击用户管理时，我希望它转到

本地主机：4200/body/用户

虽然它转到特定的网址，但它没有显示下面的任何内容，如图所示。

这些是我的代码（app.routing.ts 和 .html）

我想为我的模块设置延迟加载，但有一个我无法解决的错误。

错误是：

core.js：15724错误错误：未捕获（承诺中）：错误：找不到模块“app/invoice-builder/invoice-builder.module”错误：找不到模块“app/invoice-builder/invoice-builder.module”

应用程序路由.module.ts

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

const routes: Routes = [
  {
    path: 'invoice-builder',
    loadChildren : 'app/invoice-builder/invoice-builder.module#InvoiceBuilderModule'
  },
  {
    path: '**',
    redirectTo: 'invoice-builder'
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

应用程序模块.ts

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

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import { …

一般来说，我对角度和网络编程相当陌生，我正在尝试创建一个类似向导的表单，包括 5 个步骤。我为这 5 个步骤设置了一个路由，我的目标是防止用户通过 url 跳转到另一个步骤。他应该只使用我提供的两个“下一步”和“后退”按钮，并且只能通过这些按钮完成导航。我知道还有一些方法可以在不使用路由的情况下完成此操作，但我认为使用路由是一个很好的做法。

这些是我的路线：

const APP_ROUTES: Routes = [
    { path: '', redirectTo: '/1', pathMatch: 'full' },
    { path: '1', component: FormContainer1Component },
    { path: '2', component: FormContainer2Component },
    { path: '3', component: FormContainer3Component },
    { path: '4', component: FormContainer4Component },
    { path: '5', component: FormContainer5Component }
];

考虑这个网址：

http://localhost:4200/items

当在 GUI 中打开（展开）元素时，我使用Location.go() 来更新 URL ：

http://localhost:4200/items;openedId=123

当我点击后退按钮时，URL 更改回http://localhost:4200/items，但我对 ActivatedRoute.paramMap 的订阅未触发。（因此我的物品保持打开状态）

奇怪的是，当我连续打开两个元素，然后回击两次时，就会触发它：

Open main page -> http://localhost:4200/items
Open item 123  -> http://localhost:4200/items;openedId=123
Open item 456  -> http://localhost:4200/items;openedId=456

Back to http://localhost:4200/items;openedId=123 -> ActivatedRoute.paramMap triggered
Back to http://localhost:4200/items -> ActivatedRoute.paramMap triggered (!)

为什么第一次不触发？为什么我需要有两个历史记录才能工作？我很困惑。

更新：这是我监听 paramMap 中的更改的方式：

  public ngOnInit() {

    this.subscriptions.add(this.activatedRoute.paramMap.subscribe(paramMap => {
      this.handleNavigation(paramMap);
    }));
}

我有一个 Angular 7 应用程序，其中有一条像这样的路线

{ path : 'forgot-password/:resetHash/:email', 
  component : ForgotPasswordComponent, 
  canActivate : [ForgotPasswordPageGuard]},

现在我尝试访问该路由params，route-guard但我没有在防护中获取路由参数。这是我的forgotpassword.route.guard.ts

constructor(private _utilityService: UtilitySerivce, private _dataService: DataService, private _const: Constants, private _router: ActivatedRouteSnapshot) {
}

canActivate = (): boolean => {
    console.log('in link expiry guard')
    let userEmail = this._router.paramMap.get('email');
    let isAllow = false;

    console.log('params : ', userEmail)
    userEmail = this._utilityService.decryptMsgByCryptoJs(userEmail);
    console.log('user email : ', userEmail)
    this._dataService.post(this._const.userResetPasswordLinkExpiry, { email: userEmail }).subscribe(resp => {
        if (resp.success) {
            isAllow = true;
        } else { …

我有 2 个组件，一个父组件和一个子组件。相同的父组件应该加载到 2 个不同的路由上，假设路由 1 和路由 2。父组件检查使用了哪个路由并设置一个关于 (isRoute1) 的布尔值。子组件获取此布尔值作为输入并渲染 HTML。请参阅下面的框架代码。

首先假设我在浏览器中打开route1。我可以在控制台中看到“Parent init”和“Child init”文本，并且子组件呈现“ROUTE1”。一切都按预期进行。接下来，我在浏览器中导航到路线 2（直接从路线 1），并且得到了一些意想不到的结果。在控制台中，没有显示任何内容（因此 OnInits 没有触发），但是子进程呈现了“ROUTE2”。为什么 Angular 没有触发 OnInit() 函数？我怎样才能做到这一点？我认为在路线更改时，父组件将重新加载，因此子组件也会重新加载。

// Parent component's TS
isRoute1: boolean;
ngOnInit(): void {
console.log('Parent init')
this.router$.pipe(debounceTime(1), untilDestroyed(this)).subscribe(route => {
  this.isRoute1 = route.params.id === 'route1';
});}

// Parent component's HTML
<child-component [isRoute1]="isRoute1"></child-component>


// Child component's TS
@Input()
isRoute1: boolean;

ngOnInit(): void {
  console.log('Child init')
}

// Child component's HTML
<div *ngIf="isRoute1; else route2"> ROUTE1 </div>
<div #route2> ROUTE2 </div>

我在仪表板模块中有一个名为：WhatsAppConversationComponent 的组件。我无法使用仪表板路由中的路由路由到 WhatsAppConversationComponent。

我的仪表板模块

@NgModule({
    imports: [
        CommonModule,
        RouterModule.forChild(DashboardRoutes),
        FormsModule,
        MdModule,
        MaterialModule
    ],
    declarations: [
        DashboardComponent,
        SurveyComponent,
        QuestionnaireComponent,
        SurveyReportComponent,
        WhatsAppConversationComponent
    ]
})

export class DashboardModule { }

我的仪表板路由模块

export const DashboardRoutes: Routes = [
  {
    path: '',
    children: [{
      path: 'dashboard',
      component: DashboardComponent
    }, {
      path: 'questionnaire',
      component: QuestionnaireComponent
    }, {
      path: 'survey',
      component: SurveyComponent
    }, , {
      path: 'whatsappconversation',
      component: WhatsAppConversationComponent
    }, {
      path: 'survey-report',
      component: SurveyReportComponent
    }]
  }
];

当我到达路线/whatsappconversation时，我面临以下错误：-

core.js:3838 ERROR Error: Uncaught (in promise): TypeError: Cannot …

在删除哈希标志之前,我有

mainApp.config(function ($locationProvider, $routeProvider) {
    $routeProvider
    .when('/page', {
        controller: 'Page',
        templateUrl: 'templates/page.html'
    })
    .when('/main', {
        controller: 'Main',
        templateUrl: 'templates/main.html'
    })
    .otherwise({ redirectTo: '/main'});

    //$locationProvider.html5Mode(true);
});

这些都很好

http://localhost:8080/index.html#/main
http://localhost:8080/index.html#/page

删除井号后,我添加到index.html

<base href="/">

<script src="/vendor/bootstrap-dist/js/bootstrap.min.js"></script>
<script src="/vendor/javascript/angular/angular.js"></script>
<script src="/vendor/javascript/angular/angular-route.js"></script>
<script src="/vendor/javascript/angular/ui-bootstrap-tpls-0.11.2.min.js"></script>
<script src="/javascript/index.js"></script>
<script src="/javascript/controllers/main.js"></script>
<script src="/javascript/controllers/page.js"></script>

和index.js

$locationProvider.html5Mode(true);

现在点击http://localhost:8080重定向到http://localhost:8080/main

但http://localhost:8080/main直接在浏览器中返回404和其他页面

我该怎么做才能解决这个问题？

我的后端是java