Angular 从根组件（app.component）获取子路由参数

我的上帝：

如何从app.component（根组件）获取子路由参数，在我的应用程序中，子路由可以是“/teaching/grade/1213”或“/part/sim/te/1232”； 如何从app.component获取参数

    ngOnInit() {

    this.router.events.subscribe(data => {
        // Only handle final active route
        if (data instanceof NavigationEnd) {
            // parsedUrl conatins params, queryParams 
            // and fragments for the active route
            let parsedUrl = this.router.parseUrl(data.url).root.children;

            console.log(parsedUrl.primary.segments);
        }
    });

}

在上述代码中，有两个问题： 首先：当终端组件处于活动状态时，触发订阅； 第二：“this.router.parseUrl（data.url）”将把参数解析为路由点

请救救我

试试这个

constructor(private router: Router, private route: ActivatedRoute) { }

ngOnInit() {
    this.route.snapshot.params['id']

    // or

    this.route.params.subscribe(params => {
        console.log(params['id']);
    });
}

2017/6/13更新：

在服务中使用共享数据

应用程序状态.service.ts

@Injectable()
export class AppState {
  params = new BehaviorSubject(undefined);

  setParams(val: any) {
    this.params.next(val);
  }
}

constructor(private route: ActivatedRoute, private appState: AppState) { }

ngOnInit() {
  this.route.params.subscribe(params => {
    this.appState.setParams(params['id']);
  });
}

ngOnInit() {
  this.appState.params.subscribe(val => {
    console.log(val);
  });
}

子组件.ts

@Injectable()
export class AppState {
  params = new BehaviorSubject(undefined);

  setParams(val: any) {
    this.params.next(val);
  }
}

constructor(private route: ActivatedRoute, private appState: AppState) { }

ngOnInit() {
  this.route.params.subscribe(params => {
    this.appState.setParams(params['id']);
  });
}

ngOnInit() {
  this.appState.params.subscribe(val => {
    console.log(val);
  });
}

应用程序组件.ts

@Injectable()
export class AppState {
  params = new BehaviorSubject(undefined);

  setParams(val: any) {
    this.params.next(val);
  }
}

constructor(private route: ActivatedRoute, private appState: AppState) { }

ngOnInit() {
  this.route.params.subscribe(params => {
    this.appState.setParams(params['id']);
  });
}

ngOnInit() {
  this.appState.params.subscribe(val => {
    console.log(val);
  });
}

试一试

试试这个

constructor(private router: Router, private route: ActivatedRoute) { }

ngOnInit() {
    this.route.snapshot.params['id']

    // or

    this.route.params.subscribe(params => {
        console.log(params['id']);
    });
}

2017/6/13更新：

在服务中使用共享数据

应用程序状态.service.ts

@Injectable()
export class AppState {
  params = new BehaviorSubject(undefined);

  setParams(val: any) {
    this.params.next(val);
  }
}

constructor(private route: ActivatedRoute, private appState: AppState) { }

ngOnInit() {
  this.route.params.subscribe(params => {
    this.appState.setParams(params['id']);
  });
}

ngOnInit() {
  this.appState.params.subscribe(val => {
    console.log(val);
  });
}

子组件.ts

@Injectable()
export class AppState {
  params = new BehaviorSubject(undefined);

  setParams(val: any) {
    this.params.next(val);
  }
}

constructor(private route: ActivatedRoute, private appState: AppState) { }

ngOnInit() {
  this.route.params.subscribe(params => {
    this.appState.setParams(params['id']);
  });
}

ngOnInit() {
  this.appState.params.subscribe(val => {
    console.log(val);
  });
}

应用程序组件.ts

@Injectable()
export class AppState {
  params = new BehaviorSubject(undefined);

  setParams(val: any) {
    this.params.next(val);
  }
}

constructor(private route: ActivatedRoute, private appState: AppState) { }

ngOnInit() {
  this.route.params.subscribe(params => {
    this.appState.setParams(params['id']);
  });
}

ngOnInit() {
  this.appState.params.subscribe(val => {
    console.log(val);
  });
}

试一试

---

所有这些返回都是未定义的，我认为在根组件中，activatedRoute不是末端（最终）activatedRoute；你就不能从这里得到它吗

let segments=parsedUrl.primary.segments；segments[segments.length-1].path

感谢您回答我的问题。当我使用这个方法时，我觉得很难理解，我认为这不是解决这个问题的更好方法。否则，如果终端路由器没有参数，最好创建一个服务，并将共享数据存储在其中。或者使用

ngrx/store

将状态存储在

store

中，添加一个简单的样本。所有这些返回都未定义，我认为在根组件中，activatedRoute不是末端（最终）activatedRoute；你就不能从这里得到它吗

let segments=parsedUrl.primary.segments；segments[segments.length-1].path

感谢您回答我的问题。当我使用这个方法时，我觉得很难理解，我认为这不是解决这个问题的更好方法。否则，如果终端路由器没有参数，最好创建一个服务，并将共享数据存储在其中。或者使用

ngrx/store

在

store

中存储状态，添加一个简单的示例