标签: 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>

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

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

我正在进行一个角度项目,我已经设置了我的状态,如下所示.

$stateProvider.state('UserPanel', {
    url: '/user',
    params: { userId: null },
    views: {
        'content@': {
            templateUrl: '/AngViews/UserPanel/UserPanel.UserDetails.html'
        }
    }
});

当我导航到视图时,它会使用它的参数,所以这部分正在工作.

但是当我更新页面时,它失去了参数.我知道如果我在url变量中定义了params 它会起作用.但我想让它隐形.

我发现像这样,但不知道是否要去解决我的问题.如果确实如此,它就无法运作.有谁可以解释如何做到这一点？

谢谢你的时间

每当我们.html以角度加载服务某些控制器的文件时.不angular使一个ajax调用以检索该html.

喜欢这段代码.

 .state('home', {
              url: '/',
              templateUrl: '/Modules/Signin/signin.html',
              controller: 'SigninCtrl'
          })

我的意思是在提取signin.html时询问

• 是ajax打电话了吗？
• 或者它们是否作为普通资源加载？
• 如果ajax打电话,我在哪里可以找到一些关于它的文件.

我已经配置了Angular2路由器,如下所示:

import { provideRouter, RouterConfig } from '@angular/router';
import { Page2} from './page2';

const routes: RouterConfig = [
  { path: 'page2', component: Page2 }
];

export const appRouterProviders = [
  provideRouter(routes)
];

Plnkr 在这里可用

在运行代码时,我收到错误:

Error: Cannot match any routes: ''

我在这里错过了什么？

    this.subscription = this.router.events.subscribe((event:Event) => {
        console.log(event.url); ##### Error : Property 'url' does not exist on type 'Event'.
   }

Typescript无法识别Angular Router中内置的Event类型的属性.tsd上有什么东西我可以用来解决这个问题吗？Event是NaviagationEnd,NavigationStart类的超类

我的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 {
            ...
        }
    }
}

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 …