0

我使用动态组件加载器从由服务填充的数组中读取组件名称，然后在页面上加载组件。

我正在使用 API 的 loadIntoLocation 方法，但由于它不存在于最新版本的 angular 中，因此我需要将其替换为 @ViewChild 以获得最新版本。

这是我在使用 resolveComponent 动态添加组件的其他线程上找到的一个工作 plunker 示例。

（请参阅下方评论中的 plunker 链接。当我在移动设备上输入此内容时，我无法插入代码，没有代码我无法插入 plunker 链接）

但是，我想稍微改变一下实现。现在，app.ts 将要加载的组件数组传递给 Tabs 组件。在这里，我使用@ViewChild 来加载页面上的所有组件。

我想做的是，我还想从 app.ts 传递一个 @ViewChild 引用，以便我可以 <div #target></div> 在 App.ts 文件中定义：（组件应该在哪里呈现）。现在它存在于 Tabs.ts 中，但我不想在 Tabs 组件中定义它。我想让 Tabs.ts 作为其他组件可以用来动态加载其组件的各种基类。

因此，从本质上讲，每个组件都会有自己的模板，例如：

//Component 1
  Template: <div #left></div>
            <div #right></div>

  @ViewChild('left') child1
  @ViewChild('right') child2
  (Now pass these ViewChild references child1 and child2 to the component builder Tabs component so that I can control from component1 where to render these children)

  //Do this for multiple components
4

0 回答 0