Question

我有一个问题。

我有两个组件和服务。在第一个组件中，我在OnInit函数中向服务器调用请求（使用Service函数之一）来获取一些数据，然后我也想将数据传递给其他组件。

如果我在OnInit函数中设置其他组件中的数据，如this.data = this.responsedata.data，结果是未定义的，因为尚未完成所有需要数据的第一个（主要）请求。

在我从后端获取数据后，我可以将其发送到其余组件的最佳方法是什么？

Answer 1

您可以等待初始化子组件，直到请求完成为止？使用类似的东西：

<component *ngIf="responseIsParsed()">

其中responseIsParsed是组件上的一个方法，如果处理了响应，则返回true。

Answer 2

如果多个组件需要相同的属性，您可以在服务中公开该属性，并让每个需要它的组件通过getter获取它。

我在这里有一个例子：https://github.com/DeborahK/MovieHunter-Service

// ...
@Injectable()
export class MovieService {
    movies: IMovie[];
    private moviesUrl = './api/movies/movies.json';

    constructor(private http: HttpClient) { 
        // Get the data immediately when the service is constructed
        this.getMovies().subscribe(m => this.movies = m);
    }

    private getMovies(): Observable<IMovie[]> {
        return this.http.get<IMovie[]>(this.moviesUrl)
            .do(data => console.log(JSON.stringify(data)))
            .catch(this.handleError);
    }

    // ...
}

然后组件使用这样的getter获取它：

@Component({
    templateUrl: './movie-list.component.html'
})
export class MovieListComponent {
    get movies(): IMovie[] {
        return this.movieService.movies;
    }

    constructor(private movieService: MovieService) { }
}

当服务异步检索数据时，Angular的更改检测会将其拾取并重新执行getter，从而获取检索到的数据并将其显示在组件的模板中。

在Angular 4中接收另一个响应后设置值

2 个答案: