标签: angular-routing

我在 Angular 4 项目中遇到了一个奇怪的问题。我正在尝试通过代码导航到路径（单击按钮）。我正在使用router.navigate()如下方法来完成这项工作——

this._router.navigate(["/employeeDetails", selectedEmployee.EmployeeId]);

哪里selectedEmployee.EmployeeId有数字。导航发生了，但我在 URL 中发现了一个非常奇怪的东西。最初 URL 显示如下—— http://localhost:4200/?employeeDetails/170然后该?符号从 URL 中消失并加载所需的页面。

谁能告诉我为什么该?标志出现在 URL 中。理想情况下，它应该在"/employeeDetails"不刷新页面的情况下加载路由的相应组件。我也尝试了没有/如下所示的代码，但没有帮助。

this._router.navigate(["/employeeDetails", selectedEmployee.EmployeeId]);

任何帮助，将不胜感激。

我有哈希问题，在我构建它时在我的工作项目上，在测试项目上一切正常。我已经在谷歌中阅读了这个问题： Angular2 without hash in the url https://forum.ionicframework.com/t/url-routing-without-hash/81140 但我没有找到答案。当我添加

{provide: LocationStrategy, useClass: HashLocationStrategy}

一切正常，但带有哈希值。当我添加

{provide: LocationStrategy, useClass: PathLocationStrategy}

它仅适用于本地版本。但是工作版本不起作用http://joxi.ru/n2YLOaMijK7Pam 我怎样才能删除这个哈希http://joxi.ru/RmzBzxDTWbjeQm它对我的构建项目有什么作用？

app.module.ts

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

import {AppComponent} from './app.component';
import {MaterialModule} from '../shared/mat.module';
import {UserModule} from './user/user.module';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {AppRoutingModule} from './app-routing.module';
import {ToolbarComponent} from './toolbar/toolbar.component';
import {HashLocationStrategy, LocationStrategy, PathLocationStrategy} from '@angular/common';
import { TestingRComponent } from './testing-r/testing-r.component';

@NgModule({
  declarations: [
    AppComponent,
    ToolbarComponent,
    TestingRComponent
  ],
  imports: [
    BrowserModule,
    MaterialModule,
    UserModule, …

我有一个 Angular 5 应用程序，它可以动态加载功能模块并在主路由器插座中显示它们的内容。下面的代码显示了我的基本配置：

来自根模块（主路由器插座）的 app.component：

<router-outlet></router-outlet>

root 的路由配置（模块从传递的 url 动态加载）：

const routes: Routes = [
    { path: 'module1', loadChildren: ...},
    { path: 'module2', loadChildren: ...}
];

export const AppRoutes = RouterModule.forRoot(routes);

功能模块之一的示例路由：

const routes: Routes = [
    { path: 'report/:reportId', component: ReportComponent}
];

export const AppRoutes = RouterModule.forChild(routes);

及其包含另一个路由器插座的 app.component ：

<router-outlet></router-outlet>

这样的配置工作正常 - 如果我去 mysite.com/module1，然后加载 module1 并且 angular 控制功能模块路由器，所以访问 mysite.com/module1/report/2 会在功能模块的路由器出口内显示 ReportComponent。

我现在要做的是将 TabsComponent 添加到我的主模块中，以便能够从多个选项卡组合页面，其中每个选项卡将包含一个特定模块。我想以某种方式为 root 使用已经指定的路由，而无需手动将其重复为 TabsComponent 的子项，并将功能模块加载到 TabsComponent 的路由器插座中。

tabs.component:

<tabs-navigation></tabs-navigation>
<router-outlet></router-outlet>

tabs.configuration（在运行时通过 http 动态加载）：

{ …

我想进行路线过渡，但不是简单的滑出/滑入动画。我正在寻找左边这样的动画（https://cdn.dribbble.com/users/495792/screenshots/3847874/allshots3.gif）

我知道如何为将重绘整个内容的路线设置动画。但是我怎样才能通过改变路线实现一个/多个组件转换到另一个组件的效果（左侧的这种放大/缩放效果）。

我将不胜感激任何建议或指导在哪里寻找一些示例代码。

我想在整个应用程序中集中读取特定查询字符串参数的位置/方式，因此我认为最好的位置是在 app.component.ts 中

export class AppComponent implements OnInit, OnDestroy {
  constructor(
    private router: Router,
    private activatedRoute: ActivatedRoute) {
  }

然后，在ngOnInit()，我查看快照以及不同的订阅：

  ngOnInit(): void {
    console.log('AppComponent - ngOnInit() -- Snapshot Params: ' + this.activatedRoute.snapshot.params['code']);
    console.log('AppComponent - ngOnInit() -- Snapshot Query Params: ' + this.activatedRoute.snapshot.queryParams['code']);
    console.log('AppComponent - ngOnInit() -- Snapshot Query ParamMap: ' + this.activatedRoute.snapshot.queryParamMap.get('code'));

    this.activatedRouteParamsSubscription = this.activatedRoute.params.subscribe(params => {
      console.log('AppComponent - ngOnInit() -- Subscription Params: ' + params['code']);
    });

    this.activatedRouteQueryParamsSubscription = this.activatedRoute.queryParams.subscribe(params => {
      console.log('AppComponent - ngOnInit() -- Subscription Query …

所以我面临着著名的角度路由问题“带有延迟加载模块的命名插座”。这个问题似乎已经结束，这个人提供了一个可行的解决方案，我一直在关注。但是我仍然收到错误并且无法理解这个问题的本质

错误：无法匹配任何路由。网址段：

我尝试使用 pathMatch: 'full' 和不同的重定向路由到不同的组件，但最终总是得到相同的错误。

我已经被困了几个小时，这就是为什么决定在这里提问。我的问题在哪里，我缺少什么？

我的设置

app.routing.ts：

 const routes: Routes = [
      {
        path: '',
        loadChildren: 'app/home/home.module#HomeModule',
      },
      {
        path: 'admin',
        loadChildren: 'app/admin/admin.module#AdminModule',
      },
      {
        path: 'data',
        loadChildren: 'app/data/data.module#DataModule',
      },
      {
        path: '**',
        redirectTo: ''
      }
    ];

应用程序组件.html

<app-header></app-header>
<router-outlet></router-outlet>

data.routing-module.ts

    const routes: Routes = [
  {
    path: 'summary',
    component: SummaryComponent,
    canActivate: [AuthGuard],
  },
  {
    path: 'management/:id',
    component: DataComponent,
    canActivate: [AuthGuard],
    children: [
      {
        path: 'activities',
        component: ActivitiesComponent,
        outlet: 'activities',
      },
      {
        path: 'researches', …

我目前正在尝试将旧版 ionic 应用程序更新到 v4，但似乎无法找到与此导航等效的 v4

     return this.app.getRootNav().setPages([
         {page: Profile},
         {page: SettingsPage, params: {id: userId}}
     ])

我目前有一个路线守卫，例如

export class EntityGuard implements CanActivate {
  constructor(private readonly router: Router, ...) {}

  canActivate(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
  ): Observable<boolean | UrlTree> {

  ...

为 URL 激活此防护

basePath/select/10/123

意思是

basePath/select/:type/:id

当满足某个条件时，我需要强制导航回到

basePath/select/:type

我怎样才能做到这一点createUrlTree？例如

if (...) {
   return of(this.router.createUrlTree([../', type]));
}

我需要设置

{ relativeTo: parent }

选项。但是我似乎无法找到一种方法来做到这一点。

我目前的解决方案是

private navigateBack(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
  const end = state.url.indexOf(route.url[route.url.length - 1].path);
  const parentUrl = state.url.slice(0, end);
  return of(this.router.createUrlTree([parentUrl]));
}

我真的不喜欢。字符串操作对我来说是个大问题。

我需要帮助将路线添加到角度树。

HTML代码：

<mat-tree [dataSource]="dataSource" class="tree-container" [treeControl]="treeControl">
     <mat-tree-node class="btnLinks" *matTreeNodeDef="let node" matTreeNodePadding>
      <button mat-icon-button disabled></button>
      {{node.name}}
    </mat-tree-node>
    <mat-tree-node class="btnLinks" *matTreeNodeDef="let node;when: hasChild" matTreeNodePadding>
      <button mat-icon-button matTreeNodeToggle
              [attr.aria-label]="'toggle ' + node.name">
        <mat-icon class="mat-icon-rtl-mirror">
          {{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
        </mat-icon>
      </button>
      {{node.name}}
    </mat-tree-node>
  </mat-tree>

.Ts 文件

interface ProfileList {
  name: string;
  children?: ProfileList[];
}

const PROFILE_DATA: ProfileList[] = [
  {
    name: 'General',
  }, 
  {
    name: 'Degrees',
  },
];

/** Flat node with expandable and level information */
interface TreeFlatNode {
  expandable: boolean;
  name: …

我正在使用解析器组件，但无法从 url 获取 id。

Stackblitz - https://stackblitz.com/edit/angular-x4djgz

如果我导航到supplier/3：

我params.get('id') null从解析器和params.get('id') 3最终组件中获取。如何在解析器中获取端点 ID。

route.paramMap.subscribe(
    (params: ParamMap) => {
      console.log("params.get('id')", params.get('id'));
    }
);

这个问题已经过大量编辑，因为我最初认为这与作为 angular+electron 应用程序有关。