标签: angular-routing

[ 更新以重点提问].AngularDart 在很多方面都很好地支持模块化应用程序设计.路线设计也是如此吗？也就是说,

问题:一个应用程序可以有多个RouteInitializer？例如,以下是可能的:

class MyAppModule extends Module {
  MyAppModule() { ...
    type(RouteInitializer, 
       // Currently implementedBy takes only one RouteInitializer? 
       // Here we propose, e.g., to allow a list.
       implementedBy: 
         [MyAppRouteInitializerForFeatureSetA,
         MyAppRouteInitializerForFeatureSetB,
         MyAppRouteInitializerForFeatureSetC,
         ]);
    ...
  }
}

使用案例:我正在考虑让我的一些学生参与同一个AngularDart项目,但是(主要是)相互排斥的功能集.理想情况下,我希望他们独立工作(一旦达成"顶级"路由URL前缀).在这种情况下,他们最终会有自己RouteInitializer的.能够在项目子文件夹中"删除",集成时间,而不是将路由初始化复制粘贴到单个类文件中,这将是一件好事.

[问题的原始版本](假设接口名称RouteInitializer不是可能RouterInitializer给出的印象,可以定义多个.)

1. 路线设计也是如此吗？也就是说,
2. Router一个Angular Dart应用程序可以关联多少个实例？(我想只有一个.)
3. 一个应用程序可以有多个RouteInitializer？(假设接口名称是RouteInitializer,而不是可能RouterInitializer,给出的印象可以定义多个.
4. 如果RouteInitializer允许多个,那么addRoute name参数的范围是多少？

编辑:实际上最后一个问题在分层路由的上下文中具有自己的优点,所以我把它考虑在这里:angulardart-namespace-of-route-names-hierarchical-too.

我有一个提供静态标题菜单的索引,在下面是基于路由的ng视图,选择正确的模板.像这样例如:

<navbar>
    ...
</navbar>
<div ng-view>
</div>

到目前为止一切都很好,当一个特定的路线被击中时,一个模板被加载到具有相关控制器的容器中.

现在,我有另一个页面加载到ng-view中,并且当url"/ dashboard"被击中时它被触发.问题是仪表板页面有一个侧边栏菜单,还需要包含一些路由逻辑(或多或少).当从侧边栏菜单中单击链接时,我只需要加载页面的左侧(而不是整个ng-view容器).

我确定了两个解决方案:

1)创建一个存储该侧边栏菜单的指令,并将其注入由侧边栏菜单处理的所有页面中==>路由仍然由ng-view处理.

2)使用ng-include并在仪表板页面中有一些路由逻辑,如下所示:

 <a ng-click="templateType = 1">Template 1</a>
 <a ng-click="templateType = 2">Template 1</a>

 <div ng-if="templateType === 1" ng-include="template1" 
  ng-controller="Template1Controller"></div>
 <div ng-if="templateType === 2" ng-include="template2" 
  ng-controller="Template2Controller"></div>

还有另一种方法吗？或者处理处理某些路线的侧边栏和处理其他路线的静态菜单的最佳做法是什么,并提到侧边栏菜单仅在某些路线上可用.

我提供了绘画,希望能更好地解释我的问题.

我的angular2应用程序的根组件有以下模板:

<main class="main">
  <div class="main__container">
    <div class="main__left-area">
      <router-outlet name="left-zone"></router-outlet>
    </div>
    <div class="main__right-area">
      <router-outlet name="right-zone"></router-outlet>
    </div>
  </div>
</main>

以下路线:

import { HomeSummaryComponent } from "../components/home-summary/home-summary.component"
import { DataSummaryComponent } from "../components/data-summary/data-summary.component"
import { AskSummaryComponent } from "../components/ask-summary/ask-summary.component"

import { Routes } from "@angular/router"

export const AppRoutes: Routes = [
  {
    path: "",
    component: HomeSummaryComponent,
    outlet: "left-zone"
  },
  {
    path: "",
    component: DataSummaryComponent,
    outlet: "right-zone"
  }
];

它实际上工作得很好,但我希望能够在"右区"中加载多个组件(实际上也在左侧区域中).想法是这样的:

{
  path: "",
  components: [ DataSummaryComponent, AskSummaryComponent ],
  outlet: "right-zone"
}

控制器将一个接一个地附加.目前是否支持？如果不是,是否可以扩展现有的RouterOutlet呢？

谢谢

我在应用程序中有2个警卫,AuthGuard和AccessGuard.AuthGuard按名称建议保护所有页面,并将会话对象存储在GlobalService中,AccessGuard依赖于AuthGuard在GlobalService中存储的会话对象中的一些访问数据.

当AuthGuard返回Observable然后同时执行AccessGuard以检查尚未到达的会话对象并且代码中断时,会出现问题.有没有其他方法可以限制AccessGuard的执行,直到会话对象到达或任何其他工作来打破这种竞争条件？

#Note我没有将AccessGuard逻辑合并到AuthGuard,因为只有部分路由需要检查才能访问,而所有其他需要身份验证.例如,"用户管理"和"仪表板"之外的所有人都可以访问"帐户"页面和"数据库"页面,这些参数需要来自会话对象的外部访问参数

export const routes: Routes = [
  {
    path: 'login',
    loadChildren: 'app/login/login.module#LoginModule',
  },
  {
    path: 'logout',
    loadChildren: 'app/logout/logout.module#LogoutModule',
  },
  {
    path: 'forget',
    loadChildren: 'app/forget/forget.module#ForgetModule',
  },{
    path: 'reset',
    loadChildren: 'app/reset/reset.module#ResetModule',
  },

    path: 'pages',
    component: Pages,
    children: [
      { path: '', redirectTo: 'db', pathMatch: 'full' },
      { path: 'db', loadChildren: 'app/pages/db/db.module#DbModule' },
      { path: 'bi', loadChildren: 'app/pages/dashboard/dashboard.module#DashboardModule', canActivate:[AccessableGuard] },
      { path: 'account', loadChildren: 'app/pages/account/account.module#AccountModule' },
      { path: 'um', loadChildren: 'app/pages/um/um.module#UserManagementModule', canActivate:[AccessableGuard] },
    ],
    canActivate: [AuthGuard]
  }
];

export …

我正在尝试找出在Angular 6中获取当前路线参数的最佳方法是什么。

此刻，我必须将传递ActivatedRoute给服务的方法作为参数，然后在服务中使用它。

export class MainComponent {
    constructor(private dataService: DataService, private activeRoute: ActivatedRoute) { }

    getChartsData() {
        return this.dataService(this.activeRoute);
    }
}

@Injectable({
  providedIn: "root"
})
export class DataService {
    getChartsData(activatedRoute) {
        if (activatedRoute.snapshot.params['id']) {
            ...
        } else {
            ...
        }
    }
}

我无法将路由参数检索为空。我正在使用 angular7。请找到下面的代码

HeaderComponent ts 文件

    import {Router, ActivatedRoute} from '@angular/router';
    constructor(private httpService: HttpClient, private router: Router, private activatedRoute: ActivatedRoute) {
             this.getNewsSelectedFromRouteParam();
        }
    getNewsSelectedFromRouteParam() {
            alert();
            let id = this.activatedRoute.snapshot.paramMap.get('typeId');
            alert(id);
        }
getNewsByCountry(newsTypeSelected: any) {
        this.router.navigate(['/news',newsTypeSelected]);
        this.getNewsSelectedFromRouteParam();
    }

标题html

<div class=" dropdown-toggle" data-toggle="dropdown">
                XXX
            </div>
            <div class="dropdown-menu">
                <div *ngFor="let cr of country" class="dropdown-item"
                    (click)="getNewsByCountry(cr.value)" >{{cr.name}}</div>
            </div>

应用路由ts文件

 const routes: Routes = [
        { path: 'news/:typeId', component: XxxComponent },
    { path: '**', component: XxxComponent }
    ];

我有延迟加载模块数据重新获取的问题。onSameUrlNavigation 根本不起作用

我有一个单独的路由模块用于延迟加载功能，也许我无法正确集成 onSameUrlNavigation

项目结构：

app/
    app.component.ts
    app.module.ts
    app-routing.module.ts
        someFeature/
            someFeature.module.ts
            someFeature-routes.module.ts
            someFeature.component.ts

应用路由模块代码：

app/
    app.component.ts
    app.module.ts
    app-routing.module.ts
        someFeature/
            someFeature.module.ts
            someFeature-routes.module.ts
            someFeature.component.ts

懒加载路由模块：

    const routes: Routes = [
      {
        path: '',
        component: someFeatureComponent,
      },
    ];
    @NgModule({
      imports: [RouterModule.forChild(routes)],
      exports: [RouterModule],
    })

组件代码：

    ngOnInit(): void {
    this.unsubscribe$ = new Subject<void>();
    this.route
      .queryParams.pipe(
      takeUntil(this.unsubscribe$),
      map(p => {
        this.loading = true;
        if (p.page && p.limit) {
          this.page = p.page;
          this.limit = p.limit;
        }
        return {
          page: this.page,
          limit: this.limit,
        };
      }),
      flatMap((f) => …

I have some specific requirement in that have to work with Existing URL. Existing URL's are already well indexed and used for promotions and many campaigns so no chance to modify it.

Existing URLs is like - www.xyz.com/search//65.5445/-122.56454/Listing-name/All

While In Angular defining URL like

const routes: Routes = [
  { path: '', component: SearchpagesComponent ,
    children: [
      {
        path: 'search/:schkey/:lat/:lng/:name/:filter', loadChildren: './search/search.module#SearchModule',
        // here schkey is optinal just required blank slashes 
      }
    ]
  }
];

and in Router link

<a …

我想在我的应用程序中使用屏幕上显示的后退按钮提供正确的导航，而不仅仅是浏览器后退按钮。

现在我在我的应用程序中一般使用 ngrx。我已经检查过他们可能为跟踪路由器提供了什么样的解决方案，当然他们确实提供了一种解决方案，即router-store。

但是，看起来 router-store 只提供有关当前路线的信息，而不提供前一路线的信息。

因此，经过大量搜索后，我找不到任何可能的解决方案，因此我决定实现自己的路由器跟踪状态。它有效，但现在我不能使用routerLink指令，因为它不会调度我的动作。如果用户直接在 URL 中输入链接，整个状态就会丢失！所以这并不是最好的解决方案。

我可以通过某种方式扩展 router-store 来存储以前的路由数据吗？或者我可以使用我自己的 reducer 来监听路由器存储操作，比如ROUTER_REQUEST和ROUTER_NAVIGATED？

我想知道是否有办法在 Angular 的 HttpInterceptor 中检索当前路由。我正在使用来自不同路线的相同拦截器，但我需要检查是否正在从特定路线使用拦截器。如果是这样，我想在执行之前向后端请求添加一个特定的标头。

似乎Route、Router、ActivatedRoute和ActivatedRouteSnapshot对此不起作用。

我目前使用windows.location作为临时解决方案，但想知道在 HttpRequest 拦截器中执行此操作的正确方法是什么。

我目前的代码：

@Injectable()
export class APIClientInterceptor implements HttpInterceptor {
  constructor() {
  }

  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {

    // Check if the call is done from the embed route.
    if (currentLocation.includes('/embed/')) {

      // Get the hash ID.
      const sIndex = currentLocation.lastIndexOf('/') + 1;
      const sLength = currentLocation.length - sIndex;
      const embedHash = currentLocation.substr(sIndex, sLength);
      console.log(embedHash);

      // Add the header to tell the …