Angular 4 может активировать ребенка

Итак, у меня есть родительский компонент с вложенным в него маршрутизатором.

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

Когда родитель создается, выполняется вызов сервера, который получает большой объект JSON, позволяет просто назвать его человеческим телом. Затем, когда пользователь щелкает ссылки в родительском компоненте, он будет перемещаться по компонентам дочернего маршрутизатора, есть компонент руки, компонент ноги... т.е. (пытаясь разбить компоненты данных тела для манипуляции). Родители и дети общаются через двунаправленный сервис.

Как я могу защитить URL-адрес, чтобы пользователь не мог просто перейти к parent/bodycomponent на вкладке URL-адреса браузера, они могут получить доступ только к дочернему компоненту, соблюдая поток приложения. Я посмотрел, как можно активировать ребенка, но, похоже, это только для услуг. Могу ли я установить условие canActivateChild в parent.component.ts?


angular angular-routing angular4-router
person G Bravo    schedule 28.12.2017    source источник
comment
Почему вы хотите это сделать? Весь смысл URL-адресов и маршрутизатора в том, чтобы иметь возможность перемещаться по URL-адресу. Если вы хотите, чтобы URL всегда указывал на родительский компонент, не используйте router-outlet.   -  person JB Nizet    schedule 28.12.2017
comment
Данные с сервера будут извлечены при запуске родительского компонента. затем распределяется среди своих дочерних элементов на основе взаимодействия с пользователем. Я бы не хотел, чтобы пользователь переходил к дочернему элементу, не имея данных от его родителя.   -  person G Bravo    schedule 28.12.2017
comment
Это проблема дизайна в вашем коде. В представлении дочернего элемента ничего не отображайте, пока данные не будут доступны. Или используйте решение активировать дочерний элемент только тогда, когда данные доступны. Но пользователь должен иметь возможность обновиться и вернуться на страницу, которая отображалась ранее.   -  person JB Nizet    schedule 28.12.2017
comment
Ладно спасибо.   -  person G Bravo    schedule 28.12.2017
comment
См. раздел Условная маршрутизация Angular2. Я бы опубликовал явный пример, если вы покажете немного больше своего кода.   -  person eric99    schedule 28.12.2017

Ответы (1)


arrow_upward
1
arrow_downward

Поскольку все ваши родительские и дочерние компоненты зависят от данных общей службы, вы можете обеспечить наличие данных независимо от того, какой маршрут посещается первым, изменив службу на следующую:

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());
    }


}

и каждый раз, когда компонент, который внедряет эту службу, будь то при запуске приложения или позже, будут загружены данные.

person Uğur Dinç    schedule 28.12.2017