我使用角度5最新,我打击下面的例外
ERROR Error: StaticInjectorError(AppModule)[AppComponent -> ActivatedRoute]:
StaticInjectorError(Platform: core)[AppComponent -> ActivatedRoute]:
NullInjectorError: No provider for ActivatedRoute!
at _NullInjector.get (core.js:1002)
at resolveToken (core.js:1300)
at tryResolveToken (core.js:1242)
at StaticInjector.get (core.js:1110)
at resolveToken (core.js:1300)
at tryResolveToken (core.js:1242)
at StaticInjector.get (core.js:1110)
at resolveNgModuleDep (core.js:10854)
at NgModuleRef_.get (core.js:12087)
at resolveDep (core.js:12577)
app.module.ts看起来如下从'@ angular/router'导入{Routes,RouterModule};
@NgModule({
declarations: [
AppComponent,
OptyDetailsComponent,
GlobalNavbarComponent
],
imports: [
BrowserAnimationsModule,
BrowserModule,
HttpModule,
HttpClientModule,
FlexLayoutModule,
FormsModule,
MatButtonModule,
MatInputModule
RouterModule
],
entryComponents: [
],
providers: [
DataStoreService,
DataObjectsOscService,
AdobeSignService,
],
bootstrap: [AppComponent]
})
export class …我有这样的网址
www.yoursite.com/accounts/:accountid/infowww.yoursite.com/accounts/:accountid/users 等等。accountidURL 中有一个整数值
但是不能使用ActivatedRoute参数访问它。
现在我正在拆分 URL 以获取 accountid
除了拆分 URL 之外，有没有更好的方法来访问该值？
更新
我有一个不同的模块account，它包括帐户相关页面的所有组件和服务。
我懒加载这个模块。所以在根级路由中，也就是app-routing我指定
{ path:'account', loadChildren : './account/account.module#AccountModule' }
在帐户模块的 中account-routing，我通过
path: 'account/:accountid', component: AccountComponent, canActivate: [AuthGuard],
children: [
{ path: '', redirectTo: 'info', pathMatch: 'full' },
{ path: 'info', component: InfoComponent },
{ path: 'users, component: UsersComponent }
{path: '**', redirectTo: 'info'}
]
笔记 ：
如果存在，我们可以访问子路径中的参数。但不是父部分为什么？
我正在获取undefined父路径中的参数
你怎么能得到你当前的路线并得到它的数据,孩子和它的父母？
如果这是路线结构:
const routes: Routes = [
{path: 'home', component: HomeComponent, data: {title: 'Home'}},
{
path: 'about',
component: AboutComponent,
data: {title: 'About'},
children: [
{
path: 'company',
component: 'CompanyComponent',
data: {title: 'Company'}
},
{
path: 'mission',
component: 'MissionComponent',
data: {title: 'Mission'}
},
...
]
},
...
]如果我目前在CompanyComponent,我如何得到我当前的路线w/c是公司,得到它的父母w/c是关于,它的数据和它的兄弟姐妹,如任务等？
您好，提前感谢您的帮助。
我已经研究这个问题一段时间了，但还没有弄清楚。
我想要做的是访问参数并显示页面上选择的内容。
单击 routerLink 时它不会触发。
所以我有以下几点： 关于stackblitz的问题
我似乎无法让它工作。
layout.component.ts
import { Component, OnInit} from '@angular/core';
import { ActivatedRoute, Router} from '@angular/router';
@Component({
selector: 'app-layout',
templateUrl: './layout.component.html',
styleUrls: ['./layout.component.scss']
})
export class LayoutComponent implements OnInit {
currentUrl: string;
currentLang: string;
constructor( private route: ActivatedRoute) {
}
gettLang(): void {
console.log(this.route.snapshot.paramMap.get('lang'));
this.currentLang = this.route.snapshot.paramMap.get('lang');
}
ngOnInit() {
this.gettLang();
this.route.paramMap.subscribe(
() => this.gettLang()
);
}
}
布局.component.html
<a [routerLink]="[ 'beam/comic', 'de',1,'home', 1 ]">name de</a><br>
<a [routerLink]="[ 'beam/comic', 'en',1,'home', 1 ]">name en</a><br>
<a …我正在尝试做与这篇文章完全相同的事情：Angular 4 get queryString
我正在使用Angular 5.2.5。
当用户首次访问网站时，ActivatedRoute似乎是用来从URL检索查询字符串值的东西。但是，我无法弄清楚需要导入什么才能使用ActivatedRoute。
有人可以确切指定需要添加到app.module.ts文件以及我要使用ActivatedRoute的component.ts文件的内容吗？
这篇文章指定将路由添加到@NgModule的imports数组：ActivatedRoute-Angular 2 RC5的没有提供程序。但是，我没有app.routing.ts文件。我必须创建一个app.routing.ts文件才能使用ActivatedRoute吗？
我试图在启动/初始路线上获取路线参数。但它不起作用。
应用程序组件.ts
import { ActivatedRoute } from '@angular/router';
...
constructor(
private activatedroute: ActivatedRoute
) {}
ngOnInit() {
console.log(this.activatedroute.snapshot.paramMap.get('token'));
this.activatedroute.paramMap.subscribe( paramMap => {
console.log(paramMap.get('token'));
});
}
app.module.ts（不过不仅仅包括这个）
import { Routes, RouterModule } from '@angular/router';
const routes: Routes = [
{ path: ':token', component: HelloComponent },
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
然后我提供我的应用程序并转到：
http://本地主机:4200/123
但我的 app.component.ts 只是 console.log 的null null。为什么这不起作用？我觉得我一切都正确。这是一个可以使用的 Angular Blitz： https: //stackblitz.com/edit/angular-wnrrkd
我有一个配置为的路由路径：
{
path: 'user/:id/edit/:type',
component: UserEditTypeComponent,
},
我想到达拦截器的路径，可以从激活的路径访问该拦截器，如下所示：
constructor(private activatedRoute: ActivatedRoute) {
}
ngOnInit() {
console.log(this.activatedRoute.routeConfig.path);
}
这将导致在user/:id/edit/:type控制台中返回此路径。
我想从拦截器获得与我尝试的相同的路径：
intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
let ar = this.injector.get(ActivatedRoute);
console.log(ar.routeConfig.path);
}
这将返回错误为：Cannot read property 'path' of null。我已删除路径并进行测试，发现routeConfig为空。
我们如何在拦截器内部获得激活的路线？
还有其他方法可以访问pathin拦截器吗？
如果问题不清楚，可以用更多信息进行更新。
我正在构建一个Angular 7应用程序.在这个应用程序中,我得到了嵌套路线.我希望能够检测父路由使用的组件.我找到了一种在本地进行的方法,但这对生产无效(输出不同).
我用这个方法:
checkIfChild() {
this.sub = this.route.parent.params.subscribe(params => {
if (params['id']) {
this.parentId = params['id'];
if (this.route.parent.component['name'] === 'ProjectShowComponent') {
this.parentType = 'Project';
} else if (this.route.parent.component['name'] === 'CompanyShowComponent') {
this.parentType = 'Company';
} else if (this.route.parent.component['name'] === 'ContactShowComponent') {
this.parentType = 'User';
}
}
});
}
方法this.route.parent.component ['name']在本地输出名称,但在生产时只输出字母T.
我收到了这条消息
TypeError: 'arguments', 'callee', and 'caller' cannot be accessed in this context.
什么是检测父路线激活子路线的正确方法,以便我可以采取行动？
我有一条路线孩子这样的路线:
{
path: 'dashboard',
children: [{
path: '',
canActivate: [CanActivateAuthGuard],
component: DashboardComponent
}, {
path: 'wage-types',
component: WageTypesComponent
}]
}
在浏览器中我想获得激活的父路线
host.com/dashboard/wage-types
如何/dashboard使用Angular 2而不是JavaScript,但我也可以接受JavaScript代码,但主要是Angular 2.
我是 Angular 的新手，我一直在寻找我的问题的解决方案，但不幸的是我还没有找到。当我将参数传递给路由器（路由器类）时，但参数列表（在目标站点上）为空。
let navigationExtras: NavigationExtras ={
queryParams: {
uri: item.uri
}
}
this.router.navigateByUrl('articlelist/article-details', navigationExtras);
文章详细信息组件（路由是 ActivatedRoute 类）：
ngOnInit(): void {
console.log("ArticleDetailsComponent " + JSON.stringify(this.route.url));
this.route.queryParamMap.map(paramMap =>{
this.uri = paramMap.get('uri');
console.log(this.uri);
});
}
在 ArticleList 模块（我的项目中的模块之一）中路由：
const routes: Routes = [{
path: '',
component: ArticleListComponent,
data: {
title: 'ArticleList'
},
},
{
path: 'article-details',
component: ArticleDetailsComponent,
data: {
title: 'ArticleDetails'
},
}
];
当我在目标组件中记录 route.url 时，结果是：
ArticleDetailsComponent {"_isScalar":false,"observers":[],"closed":false,"isStopped":false,"hasError":false,"thrownError":null,"_value":[{"path":"文章详细信息","参数":{}}]}
如果有人知道如何修复它，我将不胜感激:)
router optional-parameters typescript angular angular-activatedroute