如何動態設置動態 angular 路由？

Question

我嘗試在根組件app.component.ts的ngOnInit中通過以下兩種方式動態創建路由

this.router.resetConfig([
  { path: 'news/:article-slug', component: ArticleComponent },
  { path: 'pages/:page', component: StaticPagesComponent },
  ...this.router.config
]);

和

this.route.config.unshift(
  { path: 'news/:article-slug', component: ArticleComponent },
  { path: 'pages/:page', component: StaticPagesComponent }
);

但是當我在瀏覽器中輸入 URL 時，這兩種方法都不起作用。 它們僅在 URL 由routerLink生成並且我單擊它們時才起作用。

如何生成可以通過在瀏覽器中輸入 URL 來訪問的動態路由？

Answer 1

而不是把你的代碼 ngOnInit 你必須把它放在 app.component 構造函數中。

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  constructor(private router: Router) {
    this.router.config.unshift(
      { path: 'page1', component: Page1Component },
      { path: 'page2', component: Page2Component }
    );
  }
}

問候