Angular路由器從根組件獲取子參數

Question

我的app.component.html有這個結構：

<app-main-nav></app-main-nav>
<router-outlet></router-outlet>

這是我的路線：

const routes = [
  {path: "", redirectTo: "home", pathMatch: "full"},
  {
    path: "posts", component: PostsComponent, 
    children: [{
      path: ":id",
      component: PostComponent
    }];
  }
]

我試圖從我的MaiNavComponent的PostComponent頁面訪問params ，但它會拋出一個錯誤。

export class MainNavComponent implements OnInit {

  constructor( private route: ActivatedRoute) {
    route.params.subscribe(console.log)
  }
}

我怎樣才能獲得:id的的PostComponent從MainNavComponent ？

我試着這樣做：

 route.params.subscribe(console.log)

在這里我得到一個空物體。

還有這個：

 route.firstChild.params.subscribe(console.log)

無法讀取null的屬性'params'

Answer 1

問題是ActivatedRoute僅在插座（ route-outlet ）中加載的組件內可用。 在外部組件中，您可以注入路由器並使用它如下：

export class MainNavComponent implements OnInit {

    constructor(private router: Router) {}

    ngOnInit() {

        // Fires when the url changes
        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(this.router.url);

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

我希望這能幫到您。

Answer 2

constructor( private router: Router, private activatedRoute: ActivatedRoute) { } ngOnInit() { this.loadParams(); } private loadParams(): void { this.router.events.subscribe(event => { if (event instanceof NavigationEnd) { let activatedRoute = this.activatedRoute.firstChild; while (!activatedRoute) { activatedRoute = activatedRoute.firstChild; } const value = activatedRoute.snapshot.paramMap.get('parmeter key'); } }); }

Answer 3

您必須快照以從URL.Uodate構造函數獲取ID，如下所示

constructor( private route: ActivatedRoute) {   
  }
ngOnInit() {
  // (+) converts string 'id' to a number
  let id = +this.route.snapshot.params['id'];


}