Angular 组件未从解析中初始化

Question

我有一个 JHipster 应用程序 (Angular 5 + Spring Boot 2)，我正在尝试为我拥有的模型对象创建一个新路由（不是使用实体生成器创建的，这只是一个简单的模型）。问题是我的组件没有初始化，即使我可以看到 Angular 应用正在调用正确的 API 并获得有效的 JSON 响应。

这是模型（简化版）：

export interface IInstructor {
    id?: string;
}

export class Instructor implements IInstructor {
    constructor(
        public id?: string,
    ) {}
}

以及加载 Instructor 对象的服务：

type EntityResponseType = HttpResponse<IInstructor>;
@Injectable({ providedIn: 'root' })
export class InstructorService {
    public resourceUrl = SERVER_API_URL + 'api/instructor';
    constructor(private http: HttpClient) {}

    get(name: string): Observable<EntityResponseType> {
        return this.http.get<IInstructor>(`${this.resourceUrl}/${name}`, { observe: 'response' });
    }
}

以及路由+解析：

@Injectable({ providedIn: 'root' })
export class InstructorResolve implements Resolve<IInstructor> {
    constructor(private service: InstructorService) {}

    resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
        const name = route.params['name'] ? route.params['name'] : null;
        if (name) {
            return this.service.get(name).pipe(map((instructor: HttpResponse<Instructor>) => instructor.body));
        }
        return of(new Instructor());
    }
}

export const instructorRoute: Routes = [
    {
        path: 'instructor/:name',
        component: InstructorComponent,
        resolve: {
            ride: InstructorResolve
        },
        data: {
            pageTitle: 'Instructor Details'
        }
    }
];

最后，组件本身和视图：

export class InstructorComponent implements OnInit {
    service: InstructorService;
    instructor: IInstructor;

    constructor(private instructorService: InstructorService,
                private activatedRoute: ActivatedRoute,
                private router: Router) {
        this.service = instructorService;
    }

    ngOnInit() {
        this.activatedRoute.data.subscribe(({ instructor }) => {
            this.instructor = instructor;
            console.log('Got instructor = ' + instructor);
        });
    }

<div id="jhi-instructor">
    <div class="row justify-content-center">
        <div class="col-lg-8">
            <hr/>
            <h2>Instructor Details</h2>
            <div *ngIf="instructor !== null">
                <h2>{{instructor.id}}</h2>
            </div>
        </div>
    </div>
</div>

当我导航到 /instructor/somename 时，我可以在 Chrome 调试器中看到正在对 spring 启动应用程序进行 XHR 调用，并且它获得了有效的 JSON 有效载荷返回。但在 InstructorComponent 中，从未设置 instructor 变量。我看到来自 ngOnInit 的控制台消息，但是从 activatedRoute 返回的对象为空：

Got instructor = undefined instructor.component.ts:27:12
ERROR TypeError: "_co.instructor is undefined"
    View_InstructorComponent_1 InstructorComponent.html:1

这是我为应用程序的其他部分所遵循的模式（并且基本上是从自动生成的 JHipster 代码中重新使用的）并且它运行良好，所以我不确定我遗漏了什么。

更新

如我所料，这是人为错误。我从另一个组件复制了路线并且没有更改解析值（它使用 ride 而不是 instructor）。非常感谢您的建议！

resolve: {
    instructor: InstructorResolve
},

Answer 1

我想按如下方式进行小的修正可以让您在组件中获得所需的数据。

const routes: Routes = [
{ path: 'instructor/:name',
    component: InstructorComponent,
    resolve: {
        ride: InstructorResolve
    },
    data: {
        pageTitle: 'Instructor Details'
    }
}]

然后在组件中，进行如下更改。

export class InstructorComponent implements OnInit {
  service: InstructorService;
  instructor: IInstructor;

  constructor(private instructorService: InstructorService,
              private activatedRoute: ActivatedRoute,
              private router: Router) {
      this.instructor = this.route.snapshot.data["ride"];
      this.service = instructorService;
  }

}

您需要在组件中使用在路由部分解析的相同密钥来检索数据，以便从路由中获取解析后的数据。

希望对您有所帮助。

Answer 2

试试下面的代码

export class InstructorComponent implements OnInit {
  service: InstructorService;
  instructor: IInstructor;

  constructor(private instructorService: InstructorService,
    private activatedRoute: ActivatedRoute,
    private router: Router) {
    this.service = instructorService;
  }

  ngOnInit() {
    this.activatedRoute.snapshot.data("ride").subscribe(({ instructor }) => {
      this.instructor = instructor;
      console.log('Got instructor = ' + instructor);
    });
  }
}

Angular 组件未从解析中初始化

Angular component not initializing from resolve

jhipster

angular