主页 / coding / 问题 / 78954338
Accepted
Hasan Can Saral
Asked: 2024-09-06 02:07:20 +0800 CST

在非注入上下文中从后端获取变量

  • 772

我有以下路线：

const DATA_CHILDREN: any[] = [{
  name: 'Child page',
  url: 'child-url'
}, {
  name: 'Child page two',
  url: 'child-url-two'
}];

const routes: Routes = [{
  path: 'data/some-url',
  loadChildren: ...
  component: SomeComponent,
  data: {
    pages: MENU_PAGES,
    children: DATA_CHILDREN,
  }
}];

我想DATA_CHILDREN从后端获取。我尝试将DATA_CHILDREN其转换为Promise，例如

let getDataChildren = (): Promise<Page[]> => {
  return inject(FormService).findRoutes();
};

这让我得到：

Uncaught RuntimeError: NG0203: inject() must be called from an injection context

我该如何处理这个问题？

angular

2 个回答

  1. Best Answer

    您可以尝试使用 aresolver首先从后端获取数据。在处理数据之前，请参阅使用解析器的参考资料。

    你可以用这个代码作为指导，最终这在理论上应该可行

    @Injectable({
  providedIn: 'root'
})
export class DataChildrenResolver implements Resolve<Page[]> {
  constructor(private formService: FormService) {}

  resolve(): Observable<Page[]> {
    return this.formService.findRoutes(); //<- data from the backend
  }
}

    然后，您可以在路线激活之前修改路线以使用解析器或子数据

    const routes: Routes = [{
  path: 'data/some-url',
  component: Anycomponent,
  resolve: {
    children: DataChildrenResolver 
  },
  data: {
    pages: MENU_PAGES
  }
}];

    然后，您可以更新更新组件以使用已解析的数据

    import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app',
  templateUrl: './Yourcomponent.html'
})
export class Yourcomponent implements OnInit {
  children: Page[];

  constructor(private route: ActivatedRoute) {}

  ngOnInit(): void {
    // accessing data
    this.children = this.route.snapshot.data['children'];
  }
}

    以下是您的路线路径结构应如何实现。

    {
 path: 'base'
 canActivate: [BaseGuard],
 resolve: {data: BaseDataResolver}
 children: [
  {
    path: 'child',
    guards: [ChildGuard],
    component: ChildComponent,
    resolve: {childData: ChildDataResolver}
   }
 ]
}
    • 1

  2. 这可以通过解析器来实现，解析器是在激活路由之前获取数据的服务。它用于确保在加载组件之前某些数据可用。

    创建解析器

    @Injectable({
  providedIn: 'root'
})
export class DataResolver implements Resolve<any> {
  constructor(private dataService: DataService) {}

  resolve(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
  ): Observable<any> {
    return this.dataService.getData();
  }
}

    在路由模块中配置解析器以访问数据组件

    const routes: Routes = [
  {
    path: 'data',
    component: DataComponent,
    resolve: { data: DataResolver }
  }
];

    访问组件中已解析的数据

    export class DataComponent implements OnInit {
    data: any;

    constructor(private route: ActivatedRoute) {}

    ngOnInit() {
    this.data = this.route.snapshot.data['data'];
    }
}
    • -1

相关问题