目前我有一个 Angular 2 组件，它被降级为指令并用于引导式混合 Angular1/Angular2 应用程序。在浏览器中加载组件时遇到问题，出现以下错误：
没有 ActivatedRoute 的提供者！
注意：以下，ActivatedRoute 的无提供者 - Angular 2 RC5不涵盖此用例。
这个应用程序仍然使用来自引导的 Angular 1 应用程序的所有路由，并且到目前为止工作得很好；此时我还没有将路由转换为使用 Angular 2 路由。我在构建的新组件中的要求之一是检查查询参数。这可以通过以下代码完成：
import { ActivatedRoute } from '@angular/router';
constructor(
private route: ActivatedRoute)
route.queryParams.subscribe(
data => this.Id = data['Id']);
我认为的问题在于，上面的代码依赖于 Angular2 路由器，正如我所提到的，它还没有在我的混合引导应用程序中使用。所以这是我的问题：
$routeParams获取查询字符串信息的原始 Angular1 控制器。这在我的新 Angular2 组件中不受支持。如果上面的答案是我无法使用，ActivatedRoute因为我没有使用 Angular2 路由器，我应该尝试使用这种旧方法还是使用另一种方法；我需要做的就是检查组件中的路由参数？在我的 Angular (v4) 应用程序中，我正在尝试创建一个面包屑模块。我发现这个问题很有帮助，建议我data像这样将面包屑信息存储在路由器的属性中
{ path: '', component: HomeComponent, data: {breadcrumb: 'home'}}
但是我想做的是在 data 属性中存储一个组件，然后让面包屑模块提取并呈现它。允许我像这样与面包屑模块交互
{ path: '', component: HomeComponent, data: {breadcrumb: CustomViewComponent}}
按照 angular Dynamic Component Loader 指南和有用的博客文章，我尝试让我的面包屑渲染组件执行以下操作：
import { Component, Input, OnInit, AfterViewInit,
ViewChild, ViewContainerRef, ComponentFactoryResolver } from '@angular/core';
import { Router, ActivatedRoute, NavigationEnd } from '@angular/router';
import 'rxjs/add/operator/filter';
import { MainLogoComponent } from '../my-material/main-logo/main-logo.component';
@Component({
selector: 'app-breadcrumbs',
template: `<div #parent></div>`,
styleUrls: ['./breadcrumbs.component.scss']
})
export class BreadcrumbsComponent implements OnInit, …当用户到达我的应用程序中受特殊保护的路由时，我将他重定向到登录路由，以执行身份验证。
但是，在成功验证后，我不想将她重定向回她最初到达的路线。
如何在 Angular 中保留中间路由状态然后重定向到它？
通过路由状态，我的意思是：
如果我的 Angular 应用程序，如果我导航（通过明确输入 URL 或单击指向它的页面链接）到http://localhost:4200/#/sign-in页面加载正常并显示我的登录表单。如果我然后Refresh在浏览器中单击，我将被带回根页面http://localhost:4200/#/。
我的路由器很简单：
export const routes: Route[] = [
{ path: 'sign-up', component: SignUpComponent},
{ path: 'sign-in', component: SignInComponent},
{ path: 'admin', loadChildren: 'app/admin/admin.module#AdminModule'},
{ path: 'dashboard', loadChildren: 'app/user/user.module#UserModule', canActivate: [ UserLoggedInGuard ]},
{ path: '', pathMatch: 'full', component: HomeComponent},
{ path: '**', pathMatch: 'full', component: PageNotFoundComponent},
]
我在用
@angular/core": "^4.2.4@angular/router": "^4.2.4任何想法为什么会发生这种情况？
angular-routing angular angular-router-guards angular-router
据我所知，它的调用签名是canActivate这样的：
canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
}
我有一个服务，它需要一个组件的名称并返回访问该组件所需的用户角色，以便我可以检查canActivate我的守卫功能，活动用户是否具有相应的角色。我的问题是，我不知道如何访问该组件。经过一番谷歌搜索后，我找到了这样的解决方案：
canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
const nameOfComponent = route.routeConfig.component.name;
return doSomeRoleCheck(nameOfComponent);
}
但就我而言，我只是收到一个错误：“无法读取未定义的属性‘名称’”。如何访问活动路由的组件，尤其是作为字符串的名称？
我发现，我确实在父路线上检查了这个守卫。当我在子路由中检查它时，它可以工作。如何从父组件访问子组件ActivatedRouteSnapshot
typescript angular-routing angular angular-router-guards angular-router
我在 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]);
任何帮助，将不胜感激。
我有一个 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）
我知道如何为将重绘整个内容的路线设置动画。但是我怎样才能通过改变路线实现一个/多个组件转换到另一个组件的效果（左侧的这种放大/缩放效果）。
我将不胜感激任何建议或指导在哪里寻找一些示例代码。
angular-routing angular-transitions angular angular-animations angular-router
我想在整个应用程序中集中读取特定查询字符串参数的位置/方式，因此我认为最好的位置是在 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 …typescript angular-routing angular angular-router angular-router-params
所以我面临着著名的角度路由问题“带有延迟加载模块的命名插座”。这个问题似乎已经结束，这个人提供了一个可行的解决方案，我一直在关注。但是我仍然收到错误并且无法理解这个问题的本质
错误：无法匹配任何路由。网址段：
我尝试使用 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', …