@Query не находит ссылку на компонент

Question

Я создал родительский компонент, который использует дочерний компонент внутри. Моя цель состоит в том, чтобы родительский компонент использовал мой дочерний компонент API, но у меня были проблемы. Ниже мой код уточняется/сокращается до соответствующих областей.

class TripStop {} 

@Component({ 
    selector: 'route-map' 
}) 
@View({ 
    template: '...' 
}) 
class RouteMap { 

    setRoute(route: TripStop[]) { 
    // Set the route! 
    } 

} 

@Component({ 
    selector: 'route-plan' 
}) 
@View({ 
    template: ` 
    <div> 
     ... 
     <route-map></route-map> 
    </div> 
    `, 
    directives: [RouteMap] 
}) 
class RoutePlan { 

    private stops: TripStop[]; 
    private maps:QueryList<RouteMap>; 

    constructor(@Query(RouteMap) maps:QueryList<RouteMap>) { 
     this.maps = maps; 
    } 

    public addStop() { 
    this.stops.push(new TripStop()); 

    var routeMapComponent = this.maps.first; // This evaluates to undefined. 
    routeMapComponent.setRoute(this.stops); 
    } 
} 

До сих пор мне не удалось получить ссылку на компонент детской карты маршрута в моем компоненте плана маршрута. Из того, что я читал на Angular 2.0 documentation, кажется, что я должен использовать декоратор @Query, чтобы ввести ссылку на любые дочерние компоненты, соответствующие запросу (как объекты ComponentRef).

Я попытался использовать тип компонента в запросе @Query(RouteMap) и добавить ссылку на мой элемент карты <route-map #myMap></route-map>, затем запросив с помощью этого @Query('myMap').

Смутно мне удалось обработать декоратор @ViewQuery и вернуть ссылку на элемент DOM с недостаточной картой, добавив ссылку на мой элемент & с использованием этого, как описано выше. Это мне не очень помогает, поскольку я предпочитаю общаться с моим компонентом через его API, а не изменять его DOM - однако, я думаю, это указывает на то, что общая проводка моего приложения работает должным образом.

Что мне здесь не хватает?

EDIT: Я использую версию 2.0.0-alpha.37.

Answer 1

Начиная с версии 2.0.0-alpha.37, для получения ссылки на дочернюю директиву вы можете использовать декоратор @ViewQuery, передавая тип дочернего компонента. Чтобы получить дочерний элемент DOM, вы можете использовать декоратор @ViewQuery, передавая ссылку на элемент.

@Component({ 
    selector: 'Child' 
}) 
@View({ 
    template: '<h1>I'm a child</h1>' 
}) 
class Child {} 

@Component({ 
    selector: 'Parent' 
}) 
@View({ 
    template: '<child #myComponent></child>', 
    directives: [Child] 
}) 
class Parent { 

    private childDirectives:QueryList<Child>; 
    private childViews:QueryList<Child>; 

    constructor(
    @ViewQuery(Child) childDirectives:QueryList<Child>, 
    @ViewQuery('myComponent') childViews:QueryList<ElementRef> 
) { 
    // A query list of Child components. 
    this.childDirectives = childDirectives; 
    // A query list of views with the id #myComponent. 
    this.childViews = childViews; 
    } 
} 

Я не уверен, что роль @Query есть, и я не уверен, принимает ли @ViewQuery любые другие селекторы, чем идентификаторы. Такое поведение, похоже, не так хорошо документировано, и это кажется немного неинтуитивным - однако похоже, что API по-прежнему меняется в этой области (#3922).