如何在Angular2中将值从一个组件传递到另一个组件？

Question

我试图在Angular2中将值从一个组件传递到另一个。 因此，例如，我正在尝试实现一个组件，并在该组件中设置数据和标题，然后将该数据和标题传递给嵌入其中的另一个组件？

这是更好解释的代码。

<cst-multiselect [title]="Countries" [data] = ['one', 'two', three']></cst-multiselect>

我正在尝试将值“ title ”和“ data ”传递给另一个组件：

<div ngbDropdown class="d-inline-block" [autoClose]="false"> 
         <button class="btn btn-outline-primary" id="dropdownMenu1" ngbDropdownToggle>Selected Countries 
</button> 
            <div class="dropdown-menu" aria-labelledby="dropdownMenu1"> 
                   <cst-checkbox></cst-checkbox> 
            </div> 
</div>

我想在cst-checkbox（这是一个dropdownbox）上显示从cst-multiselect传递的数据。 我想在此下拉框中设置值以及数据。 真的很感激任何帮助，因为我一直在尝试多种方法，但无济于事。 谢谢！

Answer 1

@Component({
  selector: 'cst-multiselect',
  template: '<cst-checkbox [title]="title" [data]="data"'
  ...
})
class CstMultiSelect {
  @Input() title:string;
  @Input() data:string[];
}

@Component({
  selector: 'cst-checkbox',
  ...
})
class CstCheckbox {
  @Input() title:string;
  @Input() data:string[];
}