我有一个非常奇怪的问题:index.html
<navigation-menu *ngIf="isLoggedIn"></navigation-menu>
<div class="content-wrapper" [ngClass]="{'fullContent' : !isLoggedIn}">
<section class="content">
<router-outlet></router-outlet>
</section>
</div>
导航菜单是导航菜单的组件.在路由器插座内容中有一个名为"资产"的组件.
我在资产组件中做了什么:
import { ActivatedRoute}from "@angular/router";
constructor(private route: ActivatedRoute){}
public ngOnInit(): void {
this.route.params.subscribe(params => {
const id = params["id"];
}
这有效,我得到了我的路线参数(这是一种"资产/:id").
现在我在导航菜单组件(位于路由器插座外部)和名为contextservice的全局服务中尝试了相同的操作.与上面的代码相同,但在路由更改时甚至没有触发.如果我尝试获取当前路由器快照
const strId = this.route.snapshot.params["id"];
在触发NavigationEnd事件之后,结果是相同的:strId是未定义的,因为params是一个空对象.
它只适用于我的资产组件.这是按预期工作还是应该如何处理？
我的意图是从全局服务(或导航菜单中的"全局"组件)触发事件,该事件正在监听所有路径(-params)更改.
我唯一的解决方案是在每个NavigationEnd事件之后解析完整的url,在我看来这是不正确的方法......或者处理每个子组件(在路由器插座中)的params更改.
也许我在理解中只有一个基本错误......
谢谢
接受答案的解决方案:
this.router.events.subscribe(val => {
if (val instanceof RoutesRecognized) {
var strId = val.state.root.firstChild.params["id"];
}});
不要忘记从角度路由器导入RoutesRecognized !!
我在更新到RC6后运行应用程序时遇到了一些问题.
由于changelog的官方示例,我更改了我的systemjs .
但我仍然得到像这样的编译错误:"模块""D:/ Myproject/WebClient/node_modules/@ angular/router/index"'没有导出的成员'ROUTER_DIRECTIVES'."
看起来编译器采用默认的index.js文件而不是umd包...编译是通过gulp任务完成的,具有以下选项:
"module": "system",
"moduleResolution": "node",
"target": "ES5",
"experimentalDecorators": true,
"emitDecoratorMetadata": true,
"allowSyntheticDefaultImports": false
我得到路由器模块和表单模块的这个错误.
Router为V3.0.0-rc.2,格式为V.2.0.0-rc6
认为无论如何我的systemJs无法正确读取更是一个问题.
SystemJS:
var map = {
'app': 'public/app',
'@angular/core': 'npm:@angular/core/bundles/core.umd.js',
'@angular/common': 'npm:@angular/common/bundles/common.umd.js',
'@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
'@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
'@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
'@angular/http': 'npm:@angular/http/bundles/http.umd.js',
'@angular/router': 'npm:@angular/router/bundles/router.umd.js',
'@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
'rxjs': 'npm:rxjs',
'symbol-observable': 'npm:symbol-observable',
'moment': 'npm:moment',
'ng2-charts': 'npm:ng2-charts',
'ng2-translate/ng2-translate': 'npm:ng2-translate',
'angular2-highcharts': 'npm:angular2-highcharts',
'highcharts/highstock.src': 'npm:highcharts',
'primeng': 'npm:primeng'
};
var packages = {
'app': { main: 'main', defaultExtension: 'js' },
'rxjs': { main: …