Question

我还没有找到解决方案，甚至没有查看SO问题和答案。

我正在尝试构建一个Angular 2+（我特别使用更新的Angular 4.x）＆＃34;容器＆＃34;组件，接受＆＃34;孩子＆＃34;组件，＆＃34; 2-way＆＃34;将数据/事件绑定到它们。

基本上我试图做这样的HTML模板，但我不知道（来自Angular 1.x）Angular 2+编写组件的js / ts代码的方式：

<!-- example "pseudo-html-template" use of "MyContainerComponent" and "MyChildComponent"s -->
<my-container-component>
    <my-child-component name="Child 1">
        Hello example 1 <code>HTML</code>!
    </my-child-component>
    <my-child-component name="Child 2">
        Hello example 2 <strong>HTML</strong>!
    </my-child-component>
    <my-child-component name="Child 3">
        Hello example 3 <i>HTML</i>!
    </my-child-component>
</my-container-component>

<!-- example "pseudo-html-template" of "MyContainerComponent" -->
<ul>
    <li *ngFor="/* [for any child in children] */">
        <!-- [the child <my-child-component> with "2-way" data/event binding i.e. <my-child-component [selected]="children[$index].selected" [name]="child.name"> ...] -->
    </li>
</ul>

现在我必须将所有内容放在containter组件中，并用<-- [...] --><my-child-component [selected]="children[3].selected" name="Child 3"><-- [...] -->

这样的显式索引编写绑定

我基本上需要两件事：访问＆＃34; ViewChildren＆＃34;容器组件内的组件，用它们的内部HTML显示它们（并且可能还保留它们的状态/功能？），以及一种在容器组件代码加载时动态添加绑定的方法。如果可能的话，我想用类似的模板HTML代码（即在my-app.component.html中）来实现这一点，而不是在组件的js / ts代码中指定子html

我不知道在哪里以及如何寻找解决方案和文档。

Angular 2+如何动态绑定到子组件

0 个答案: