如何在应用初始化时从后端 API 推送额外的路由

Question

我正在写一些类似于 CMS 的东西。我有两个应用程序。用 Django 编写的后端和 angular 中的 SPA 7. 我认为后端部分 list-pages 和 retrieve-page

在向 http://127.0.0.1:8000/pages-management/pages returns json 发送请求时，数据为：

[
  {
    "id": 1,
    "title": "some title 1",
    "section": "section1",
    "urlKey": "some_title_1"
  },
    {
    "id": 2,
    "title": "some title 2",
    "section": "section2",
    "urlKey": "some_title_2"
  },
]

发送请求至：

http://127.0.0.1:8000/pages-management/pages/some_title_1

它returns:

{
  "id": 1,
  "title": "some_title_1",
  "section": "section1",
  "urlKey": "some_title_1",
  "content": "<p>html content</p>"
}

我想达到什么目的？

我想在 angular 应用程序启动时从 /pages-management/pages 加载数据，并从中加载数据以创建路线。

在第一次尝试中，我尝试在 header 组件初始化期间添加这些路由：

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.css']
})
export class HeaderComponent implements OnInit {

  currentUserEmail: string;
  pages: Page[];

  constructor(private authService: AuthService, private pageService: PageService, private router: Router) {
  }

  ngOnInit() {
    // TODO remove the property this.authService.currentUserEmail and export currentUserEmail from localstorage?
    this.currentUserEmail = this.authService.currentUserEmail;

    this.pageService.getPages().subscribe(data => {
      this.pages = data;
      const data = this.router.config.filter(value => value.path === 'children')[0].children;
      this.pages.forEach(item => {
        data.push({path: item.urlKey, component: PageComponent});
      });
    }, error1 => {
    });
  }
} 

  <div class="nav-item mr-2">

        <div class="row">
          <div class="col">
            <div ngbDropdown class="d-inline-block">
              <button class="btn btn-light" id="studentZoneDropDown" ngbDropdownToggle>
                Strefa Studenta
              </button>
              <div ngbDropdownMenu aria-labelledby="dropdownBasic1">
                <button class="dropdown-item" [routerLink]="['strefa-studenta', page.urlKey]"
                        *ngFor="let page of pages">{{page.title}}</button>
              </div>
            </div>
          </div>
        </div>
      </div>

当我让应用程序加载并在我的导航栏中输入 url 到 link 时，它几乎可以正常工作。问题是当我尝试通过浏览器 link http://localhost:4200/children/some_title_1 直接输入 url 时，它不起作用。但是可以在导航栏中通过 link 从 http://localhost:4200 导航到 http://localhost:4200/children/some_title_1。

问题是如何实现这个目标？

Answer 1

如果你想在应用程序启动时执行数据加载，你可以使用APP_INITIALIZER注入令牌：

@NgModule({
   ...
   providers: [
      {
          provide: APP_INITIALIZER,
          useFactory: initializeApplication,
          deps: [/* Add dependencies here */],
          multi: true
      }
   ]
})
export class AppModule {}

export function initializeApplication(/* Inject dependencies here */) {
    return () => {
        // TODO: send http request or execute promises.
    };
}

在此处查找更多信息：https://www.tektutorialshub.com/angular/angular-how-to-use-app-initializer/

希望对您有所帮助。

如何在应用初始化时从后端 API 推送额外的路由

How to push additional routes from backend API on app initizalzation

angular

api

angular-ui-router