Angular 4 可以激活Child答案

【问题标题】：Angular 4 can activateChildAngular 4 可以激活Child
【发布时间】：2018-06-09 08:42:02
【问题描述】：

所以我有一个父组件，其中嵌套了一个路由器

<parent>
    <router-outlet></router-outlet>
</parent>

当创建父对象时，调用服务器获取一个大的 JSON 对象，我们只称它为人体。然后当用户点击父组件中的链接时，他们将浏览子路由器的组件，有一个手臂组件，腿组件......即（试图分解身体数据的组件以进行操作）。父母和孩子通过双向服务进行交流。

我怎样才能保护 url 使用户不能只是去 parent/bodycomponent 在浏览器 url 选项卡中，他们只能通过遵守应用程序的流程来访问子组件。我研究过可以激活孩子，但它似乎只用于服务。我可以在 parent.component.ts 中设置 canActivateChild 条件吗？

【问题讨论】：

您为什么要这样做？ URL 和路由器的全部意义在于能够使用 URL 进行导航。如果您总是希望 URL 指向父组件，请不要使用 router-outlet。
父组件启动时会从服务器拉取数据。然后根据用户交互在其子项中分发。我不希望用户在没有来自其父母的数据的情况下去找孩子。
这是您代码中的设计问题。在孩子看来，在数据可用之前不要显示任何内容。或者使用解析仅在数据可用时激活子级。但是用户应该能够刷新并返回到之前显示的页面。
好的，谢谢。
见Angular2 Conditional Routing。如果您显示更多代码，我会发布一个明确的示例。

标签： angular angular-routing angular4-router

【解决方案1】：

由于您的父组件和子组件都依赖于共享服务的数据，因此您可以通过将服务更改为以下内容来确保无论首先访问哪个路由都存在数据：

import { HttpClient } from "app/http-client";
import { Injectable } from "@angular/core";
import { Observable } from "rxjs/Rx";

@Injectable()
export class ParentService {
    data: any;


    constructor(private http: HttpClient) {
         this.getData()
             .subscribe(data => this.data = data);
    }

    getData() {
        return this.http.get(`url`)
                        .map(res => res.json());
    }


}

并且任何时候注入此服务的组件，无论是在应用启动时还是稍后，都会加载数据。

【讨论】：