angular 2 - дочернее свойство @Input не определено при использовании вложенных свойств @Input() во вложенных компонентах

Question

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

Это выпадающий компонент, который многократно используется в компоненте диаграммы страницы.

Dropdown.component.ts

@Component({
  selector: 'my-dropdown',
  templateUrl: './dropdown.component.html',
  styleUrls: ['dropdown.component.scss'],
  encapsulation: ViewEncapsulation.None,
})

/**
 * @classdesc Dropdown component class
 */
export class DropdownComponent implements OnInit {


  private opened: boolean = false;

  /**
   * placeholder for the dropdown
   * @type {string}
   */
  @Input() placeholder: string;

  /**
   * event handler which is called when selected value is changed
   * @type {EventEmitter<any>}
   */
  @Output() onSelect = new EventEmitter<any>();

  /**
   * inner select component component
   */
  // @ViewChild('select') selectComponent: any;

  /**
   * Two way data binding implementation for selectedValue property
   */
  @Output() selectedChange: EventEmitter<any>;

  constructor() {
    this.selectedChange = new EventEmitter();
  }

  ngOnInit() {
  }

  /**
   * selectedValue setter. if value is not a string we are "Stringifying it"
   * @param value - the selected value
   */
  @Input() selected: { label: string, value: string };

  /**
   * options setter. if object "value" property is not a string we are "Stringifying it"
   * @param value
   */
  @Input() options;
    ....
    }

Это страница диаграмм, в которой есть несколько экземпляров моих выпадающих меню (для простоты показан только один)

Графики-page.html

...
<div class="content">
   <my-dropdown [options]="timeframeDropdownInfo.options" 
       [placeholder]="timeframeDropdownInfo.placeholder" 
       [(selected)]="timeframeDropdownInfo.selectedOption"
       (onSelect)="timeframeDropdownInfo.onSelect($event)">
   </my-dropdown>
</div>...

Графики-Page.ts

@Component({
  selector: 'charts-page',
  templateUrl: './charts-page.component.html',
  styleUrls: ['./charts-page.component.css'],
})
export class ChartsPageComponent implements OnInit {

  @Input() timeframeDropdownInfo: DropdownModel;
  ...


  constructor() { }

  ngOnInit() {
  }

}

Теперь я хочу использовать компонент страницы диаграмм в нескольких местах с разными данными. как это:

Торги-Component.html

<charts-page [timeframeDropdownInfo]="timeframeDropdownInfo"></charts-page>

и вот как я инициализирую свое свойство timeframeDropdownInfo:

Trades.Component.ts

    ...
  constructor(private tradeService: TradeService, private myElement: ElementRef) {

        //timeframe dropdown
        this.timeframeDropdownInfo = new DropdownModel();
        this.timeframeDropdownInfo.options = TransactionsTradesData.TIME_FRAMES;
        this.timeframeDropdownInfo.placeholder = 'Time Frame';
        this.timeframeDropdownInfo.selectedOption = this.selectedTimeframe;
        this.timeframeDropdownInfo.onSelect = this.onTimeframeChange;
...

Проблема в том, что выпадающий список пуст. проблема не в выпадающем списке, потому что он работал раньше. только когда я добавил еще один уровень вложенности, привязка оборвалась. Использование Augury показывает, что все инициализируется на уровне страницы диаграммы, но в раскрывающемся списке свойства компонента не определены. так что я предполагаю, что выпадающий список отображается перед инициализацией данных, но я подумал, что аннотация @Input сработает. какие-нибудь идеи, как я могу заставить эту многоуровневую вложенность работать?