使用Angular 4将数据从解析器获取到组件中_Angular

使用Angular 4将数据从解析器获取到组件中

angular

使用Angular 4将数据从解析器获取到组件中,angular,Angular,我正在努力将数据从我的解析器中获取到一个组件中。它总是返回null 我可以看到它正在从我的服务器获取数据，并且正确显示了页面模板，没有错误，但是它没有访问数据 student.component.ts import { Component, ViewChild } from '@angular/core'; import {MdPaginator, MdSort} from '@angular/material'; import { Student, StudentService } from

我正在努力将数据从我的解析器中获取到一个组件中。它总是返回null

我可以看到它正在从我的服务器获取数据，并且正确显示了页面模板，没有错误，但是它没有访问数据

student.component.ts

import { Component, ViewChild } from '@angular/core';
import {MdPaginator, MdSort} from '@angular/material';

import { Student, StudentService } from '../shared';

import 'rxjs/add/operator/startWith';
import 'rxjs/add/observable/merge';
import 'rxjs/add/operator/map';
import {ActivatedRoute, Router} from "@angular/router";

@Component({
  selector: "student",
  templateUrl: './student.component.html',
  styleUrls: ['./student.component.scss']
})

export class StudentComponent {
  constructor (
    private route: ActivatedRoute,
    private studentService: StudentService,
    private router: Router,
  ) {}

  students: Student[];

  displayedColumns = ['userId', 'userName', 'progress'];

  @ViewChild(MdPaginator) paginator: MdPaginator;
  @ViewChild(MdSort) sort: MdSort;

  ngOnInit() {
    // Retreive the prefetched students
    this.route.data.subscribe(
      (data: { students: Student[] }) => {
        this.students = data.students;
      }
    );

    console.log(this.students);
  }
}

import { BrowserModule } from '@angular/platform-browser';
import { ModuleWithProviders, NgModule } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { MyAngularMaterialModule, HeaderComponent, SidebarComponent, ApiService, SharedModule } from './shared';
import { ActivityModule, ActivityComponent } from './activity';
import { StudentModule, StudentComponent } from './student';

import { RouterModule } from '@angular/router';

import { AppComponent } from './app.component';
import { StudentResolver } from "./student/student-resolver.service";
import {StudentService} from "./shared/services/student.service";


const routes: ModuleWithProviders = RouterModule.forRoot([
  {
    path: 'student',
    component: StudentComponent,
    data: {
      title: 'Students'
    },
    resolve: {
      students: StudentResolver
    }
  },
  {
    path: 'activity',
    component: ActivityComponent,
    data: {
      title: 'Activities'
    }
  },
  { path: '',   redirectTo: '/student', pathMatch: 'full' },
]);

@NgModule({
  declarations: [
    AppComponent,
    HeaderComponent,
    SidebarComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MyAngularMaterialModule,
    SharedModule,
    ActivityModule,
    StudentModule,
    routes
  ],
  providers: [ApiService, StudentService, StudentResolver],
  bootstrap: [AppComponent]
})
export class AppModule { }

import { Injectable, } from '@angular/core';
import { ActivatedRouteSnapshot, Resolve, Router, RouterStateSnapshot } from '@angular/router';
import { Observable } from 'rxjs/Rx';

import { Student, StudentService } from '../shared';

@Injectable()
export class StudentResolver implements Resolve<Student> {
  constructor(
    private studentService: StudentService,
    private router: Router
  ) {}

  resolve(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
  ): Observable<any> {

    return this.studentService.query()
           .catch((err) => this.router.navigateByUrl('/'));

  }
}

应用程序模块.ts

import { Component, ViewChild } from '@angular/core';
import {MdPaginator, MdSort} from '@angular/material';

import { Student, StudentService } from '../shared';

import 'rxjs/add/operator/startWith';
import 'rxjs/add/observable/merge';
import 'rxjs/add/operator/map';
import {ActivatedRoute, Router} from "@angular/router";

@Component({
  selector: "student",
  templateUrl: './student.component.html',
  styleUrls: ['./student.component.scss']
})

export class StudentComponent {
  constructor (
    private route: ActivatedRoute,
    private studentService: StudentService,
    private router: Router,
  ) {}

  students: Student[];

  displayedColumns = ['userId', 'userName', 'progress'];

  @ViewChild(MdPaginator) paginator: MdPaginator;
  @ViewChild(MdSort) sort: MdSort;

  ngOnInit() {
    // Retreive the prefetched students
    this.route.data.subscribe(
      (data: { students: Student[] }) => {
        this.students = data.students;
      }
    );

    console.log(this.students);
  }
}

import { BrowserModule } from '@angular/platform-browser';
import { ModuleWithProviders, NgModule } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { MyAngularMaterialModule, HeaderComponent, SidebarComponent, ApiService, SharedModule } from './shared';
import { ActivityModule, ActivityComponent } from './activity';
import { StudentModule, StudentComponent } from './student';

import { RouterModule } from '@angular/router';

import { AppComponent } from './app.component';
import { StudentResolver } from "./student/student-resolver.service";
import {StudentService} from "./shared/services/student.service";


const routes: ModuleWithProviders = RouterModule.forRoot([
  {
    path: 'student',
    component: StudentComponent,
    data: {
      title: 'Students'
    },
    resolve: {
      students: StudentResolver
    }
  },
  {
    path: 'activity',
    component: ActivityComponent,
    data: {
      title: 'Activities'
    }
  },
  { path: '',   redirectTo: '/student', pathMatch: 'full' },
]);

@NgModule({
  declarations: [
    AppComponent,
    HeaderComponent,
    SidebarComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MyAngularMaterialModule,
    SharedModule,
    ActivityModule,
    StudentModule,
    routes
  ],
  providers: [ApiService, StudentService, StudentResolver],
  bootstrap: [AppComponent]
})
export class AppModule { }

import { Injectable, } from '@angular/core';
import { ActivatedRouteSnapshot, Resolve, Router, RouterStateSnapshot } from '@angular/router';
import { Observable } from 'rxjs/Rx';

import { Student, StudentService } from '../shared';

@Injectable()
export class StudentResolver implements Resolve<Student> {
  constructor(
    private studentService: StudentService,
    private router: Router
  ) {}

  resolve(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
  ): Observable<any> {

    return this.studentService.query()
           .catch((err) => this.router.navigateByUrl('/'));

  }
}

学生解析程序.service.ts

import { Component, ViewChild } from '@angular/core';
import {MdPaginator, MdSort} from '@angular/material';

import { Student, StudentService } from '../shared';

import 'rxjs/add/operator/startWith';
import 'rxjs/add/observable/merge';
import 'rxjs/add/operator/map';
import {ActivatedRoute, Router} from "@angular/router";

@Component({
  selector: "student",
  templateUrl: './student.component.html',
  styleUrls: ['./student.component.scss']
})

export class StudentComponent {
  constructor (
    private route: ActivatedRoute,
    private studentService: StudentService,
    private router: Router,
  ) {}

  students: Student[];

  displayedColumns = ['userId', 'userName', 'progress'];

  @ViewChild(MdPaginator) paginator: MdPaginator;
  @ViewChild(MdSort) sort: MdSort;

  ngOnInit() {
    // Retreive the prefetched students
    this.route.data.subscribe(
      (data: { students: Student[] }) => {
        this.students = data.students;
      }
    );

    console.log(this.students);
  }
}

import { BrowserModule } from '@angular/platform-browser';
import { ModuleWithProviders, NgModule } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { MyAngularMaterialModule, HeaderComponent, SidebarComponent, ApiService, SharedModule } from './shared';
import { ActivityModule, ActivityComponent } from './activity';
import { StudentModule, StudentComponent } from './student';

import { RouterModule } from '@angular/router';

import { AppComponent } from './app.component';
import { StudentResolver } from "./student/student-resolver.service";
import {StudentService} from "./shared/services/student.service";


const routes: ModuleWithProviders = RouterModule.forRoot([
  {
    path: 'student',
    component: StudentComponent,
    data: {
      title: 'Students'
    },
    resolve: {
      students: StudentResolver
    }
  },
  {
    path: 'activity',
    component: ActivityComponent,
    data: {
      title: 'Activities'
    }
  },
  { path: '',   redirectTo: '/student', pathMatch: 'full' },
]);

@NgModule({
  declarations: [
    AppComponent,
    HeaderComponent,
    SidebarComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MyAngularMaterialModule,
    SharedModule,
    ActivityModule,
    StudentModule,
    routes
  ],
  providers: [ApiService, StudentService, StudentResolver],
  bootstrap: [AppComponent]
})
export class AppModule { }

import { Injectable, } from '@angular/core';
import { ActivatedRouteSnapshot, Resolve, Router, RouterStateSnapshot } from '@angular/router';
import { Observable } from 'rxjs/Rx';

import { Student, StudentService } from '../shared';

@Injectable()
export class StudentResolver implements Resolve<Student> {
  constructor(
    private studentService: StudentService,
    private router: Router
  ) {}

  resolve(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
  ): Observable<any> {

    return this.studentService.query()
           .catch((err) => this.router.navigateByUrl('/'));

  }
}

你不能访问数据。您在订阅之外有console.log。它所做的只是在component init上记录一次日志。忽略这个console.log，实际上，我正在尝试访问这个数据调试，并在

this.students=data.students，但它总是返回未定义的。你还有别的想法吗？：）很难说，因为唯一真正影响其价值的是studentService，而问题中忽略了它。我在发布的代码中没有发现任何错误。让我发布它以检查它是否有帮助。我刚刚做了另一个测试，我尝试在不使用resolve的情况下获取代码，但得到了相同的结果。您不访问数据。您在订阅之外有console.log。它所做的只是在component init上记录一次日志。忽略这个console.log，实际上，我正在尝试访问这个数据调试，并在this.students=data.students，但它总是返回未定义的。你还有别的想法吗？：）很难说，因为唯一真正影响其价值的是studentService，而问题中忽略了它。我在发布的代码中没有发现任何错误。让我发布它以检查它是否有帮助。我刚刚做了另一个测试，我尝试在不使用resolve的情况下获取代码，我得到了相同的结果。