Как протолкнуть дополнительные маршруты из бэкэнд-API при инициализации приложения - PullRequest
Новая
       13

Как протолкнуть дополнительные маршруты из бэкэнд-API при инициализации приложения

0 голосов
/ 21 марта 2019

Я пишу что-то похожее на CMS.У меня есть два приложения.Серверная часть написана на Django, а SPA написан на угловом 7. У серверной части есть представления, что list-pages и retrieve-page

При отправке запроса на http://127.0.0.1:8000/pages-management/pages возвращает 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"
  },
]

По запросу sendint: 

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

Возвращает: 

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

Чего я хочу достичь?

Я бы хотел бытьзагрузить данные из /pages-management/pages при запуске углового приложения и данные для создания маршрутов из него.

В первой попытке я попытался добавить эти маршруты во время инициализации компонента заголовка: 

@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 через ссылку в моей навигациибар.Проблема в том, что когда я пытаюсь ввести URL-адрес напрямую через браузер, ссылка http://localhost:4200/children/some_title_1 не работает.Но переход от http://localhost:4200 к http://localhost:4200/children/some_title_1 по ссылке в навигационной панели возможен.

Вопрос в том, как достичь этой цели?

1 Ответ

1 голос
/ 21 марта 2019

Если вы хотите выполнить загрузку данных при запуске приложения, вы можете использовать токен 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/

Надеюсь, это поможет.

...