理解Angular2中的ViewContainerRef

Codeing_ls 发布于2019-08-26 13:27 / 1868人阅读

摘要：注意本文不是关于如何用编程的方式来创建组件的文章。在这个例子中，容器元素就是元素，模版将作为这个元素的兄弟节点被插入。用来演示以组件自身作为视图容器，将组件中的模版插入视图容器的效果。

原文链接：https://netbasal.com/angular-...
作者：Netanel Basal
译者：而井

译者注：虽然文章标题写的是Angular2，但其实泛指的是Angular2+，读者可以将其运用到最新的Angular版本中。

如果你曾经需要用编程的方式来插入新的组件或模版，你可能已经用过了ViewContainerRef服务了。

在阅读了（许多）文章和问题后，我发现了许多（人）对于ViewContainerRef的疑惑，所以让我试着向你解释什么是ViewContainerRef。

注意：本文不是关于如何用编程的方式来创建组件的（文章）。（译者注：只是为了阐述什么是ViewContainerRef）

让我们回归到纯JavaScript上来开始（教程）。根据下面的标记，你的任务是添加一个新段落来作为当前（节点）的一个兄弟（节点）。

Element one

为了简化（操作），让我们使用JQuery:

$("Element two
").insertAfter(".one");

当你需要添加新的DOM元素（即：组件、模版）时，你需要一个可以插入这个元素的位置。

Angular也没有什么黑魔法。它也只是JavaScript。如果你想插入新的组件或模版，你需要告诉Angular，哪里去放置这个元素。

所以ViewContainerRef就是：

一个你可以将新的组件作为其兄弟（节点）的DOM元素（容器）。
（译者注：即如果你以某个元素或组件作为视图容器ViewContainerRef，对其新增的组件、模版，将成为这个视图容器的兄弟节点）

用依赖注入来获取ViewContainerRef

@Component({
  selector: "vcr",
  template: `
    
  `,
})
export class VcrComponent {
  @ViewChild("tpl") tpl;
  constructor(private _vcr: ViewContainerRef) {
  }
  
  ngAfterViewInit() {
    this._vcr.createEmbeddedView(this.tpl);
  }
}

@Component({
  selector: "my-app",
  template: `
      
  `,
})
export class App {

}

我们在这个组件中注入了服务。在这个样例中，容器将指向你的宿主元素（vcr 元素），并且模版将作为vcr元素的兄弟（节点）被插入。

用ViewChild来获取ViewContainerRef

@Component({
  selector: "vcr",
  template: `
    
    Some element
    
  
  `,
})
export class VcrComponent {
  @ViewChild("container", { read: ViewContainerRef }) _vcr;
  @ViewChild("tpl") tpl;

  ngAfterViewInit() {
    this._vcr.createEmbeddedView(this.tpl);
  }
}

@Component({
  selector: "my-app",
  template: `
    
      
    
  `,
})
export class App {

}

我们可以使用ViewChild装饰器来收集任何我们视图上的元素，并将其当作ViewContainerRef。

在这个例子中，容器元素就是div元素，模版将作为这个div元素的兄弟（节点）被插入。

你可以将ViewContainerRef用日志输出，来查看它的元素是什么：

你可以在这里试玩这些代码。
好了本文到此结束。

译者附

虽然作者已经说得很透彻了，但是由于动态插入组件、模版有很多种排列组合，我（译者）做了一些样例代码来辅助你理解，目前代码已经上传到GitHub上了，地址是：https://github.com/RIO-LI/ang...
这个参考项目目前包含6的目录，每一个都是多带带的Angular项目，每一个目录具体演示内容如下：

component-insert-into-component-viewcontainer: 用来演示以组件作为视图容器ViewContainerRef，将另外一个组件插入视图容器的效果。
component-insert-into-dom-viewcontainer: 用来演示以DOM元素为视图容器ViewContainerRef，将一个组件插入视图容器的效果。
component-insert-into-self-viewcontainer: 用来演示以组件自身作为视图容器ViewContainerRef，将组件中的模版插入视图容器的效果。
ngtemplate-insert-into-component-viewcontainer: 用来演示以一个组件作为视图容器ViewContainerRef，将一个插入视图容器的效果。
ngtemplate-insert-into-dom-viewcontainer: 用来演示以一个DOM元素为视图容器ViewContainerRef，将一个插入视图容器的效果。
ngtemplate-insert-into-ngcontainer-viewcontainer:用来演示以一个元素为视图容器ViewContainerRef，将一个插入视图容器的效果。

GPU云服务器云服务器你理解中的云服务器ecs是什么 ViewContainerRef angular2 angular2JS

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/108839.html

Angular4 动态加载组件杂谈

摘要：最近接手了一个项目，客户提出了一个高大上的需求要求只有一个主界面，所有组件通过来显示。最近接手了一个项目，客户提出了一个高大上的需求：要求只有一个主界面，所有组件通过Tab来显示。其实这个需求并不诡异，不喜欢界面跳转的客户都非常热衷于这种展现形式。好吧，客户至上，搞定它！这种实现方式在传统的HTML应用中，非常简单，只是在这Angular4（以下简称ng）中，咋个弄呢？我们先来了...

testHs 2019-08-20 17:49 评论0 收藏0
angular1.x和angular2+并行，angular1.x 升级 angular2+方案

摘要：可以在不必打断其它业务的前提下，升级应用程序，因为这项工作可以多人协作完成，在一段时间内逐渐铺开，下面就方案展开说明主要依赖提供模块。在混合式应用中，我们同时运行了两个版本的。这意味着我们至少需要和各提供一个模块。 angular1.x 升级 angular2+ 方案我给大家提供的是angular1.x和angular5并行，增量式升级方案，这样大家可以循序渐进升级自己的应用，不想看...

Olivia 2019-08-26 11:36 评论0 收藏0
教你如何在@ViewChild查询之前获取ViewContainerRef

摘要：使用指令代替查询每一个指令都可以在它的构造器中注入引用。让我们声明这样一个指令我已经在构造器中添加了检查代码来保证视图容器在指令实例化的时候是可用的。原文：https://blog.angularindepth.c...作者：Max Koretskyi译者：而井【翻译】教你如何在@ViewChild查询之前获取ViewContainerRef showImg(https://se...

suxier 2019-08-23 14:19 评论0 收藏0
Angular 2.x+ 如何动态装载组件

摘要：如何动态装载组件在中我们可以使用方法编译模板达到动态加载组件的目的，然而在中则没有那么简单，下面的例子即为动态加载广告组件的过程。是创建动态组件较好的选择，因为它不会渲染多余的输出。 Angular 2.x+ 如何动态装载组件在 Angular 1.x 中我们可以使用 $compile 方法编译模板达到动态加载组件的目的，然而在 ng2 中则没有那么简单，下面的例子即为动态加载广告组...

Yi_Zhi_Yu 2019-08-20 16:45 评论0 收藏0
[译] 关于 Angular 动态组件你需要知道的

摘要：第一种方式是使用模块加载器，如果你使用加载器的话，路由在加载子路由模块时也是用的作为模块加载器。还需注意的是，想要使用还需像这样去注册它你当然可以在里使用任何标识，不过路由模块使用标识，所以最好也使用相同。原文链接：Here is what you need to know about dynamic components in Angular showImg(https://se...

lcodecorex 2019-08-26 11:53 评论0 收藏0