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注释会解决这个问题。任何想法如何使这个多级嵌套工作？

在嵌套组件中使用嵌套的@Input（）属性时，未定义angular 2 - child @Input属性

0 个答案: