AngularJS中视图和templateUrl的区别

在本文中，我们将看到 AngularJS 中的 Views 和 TemplateUrl 之间的一些区别。

视图：视图是用户在屏幕上看到的任何内容，用于设置多个视图或手动定位视图。 Angular 使用视图与平台连接。在 Angular 中，每个元素都有一个对应于该元素的视图。

视图类型：

1. View Containers： View Container 包含主机和嵌入式视图。这些通常被称为视图。每个 @Component 类都会向 Angular 注册一个视图容器。视图容器的另一种引用类型是 ViewContainerRef 它表示一个容器，可以连接一个或多个视图。

   例子：

   HTML

   @Component({
       selector: 'sample',
       template: `
         
   View Container
         
           
   This is an example of view container
     
       `
   })
   export class SampleComponent implements AfterViewInit {
       @ViewChild("vc", {read: ViewContainerRef}) vc: ViewContainerRef;
     
       ngAfterViewInit(): void {
           // outputs `template bindings={}`
           console.log(this.vc.element.nativeElement.textContent);
       }
   }

   
   
   
   
   
   
   

   输出：

   

2. 主机视图：这种类型的视图托管动态组件。主机视图由 Angular 编译器为在 bootstrap 或 entryComponent 模块中指定的每个组件生成。现在每个宿主视图负责在调用 factory.createComponent 时生成一个组件视图。宿主视图附加 DOM 元素。

   示例：为了让任何主机视图工作，必须存在一个包含视图的视图容器。我们这里有两个视图容器 和

   HTML

   import { Component } from '@angular/core';
     
   @Component({
     template: `
       
   Host View
       
   Dynamically Generated!
     `
   })
   export class AnotherComponent {}
   

   HTML

   import { AfterViewInit, Component, ViewChild,
   ViewContainerRef, ComponentFactoryResolver } from '@angular/core';
   import { AnotherComponent } from './another.component';
     
   @Component({
     selector: 'app-example',
     template: `
       
   Application Content
       
       
   Application using host views
     `,
     entryComponents: [ AnotherComponent ]
   })
   export class ExampleComponent implements AfterViewInit {
     @ViewChild("container", { read: ViewContainerRef }) ctr: ViewContainerRef;
     
     constructor(private resolve: ComponentFactoryResolver) { }
     
     ngAfterViewInit() {
       const factory = this.resolve.resolveComponentFactory(AnotherComponent);
       this.ctr.createComponent(factory);
     }
   }
   

   输出：

   

3. 嵌入式视图：这些类型的视图与其他视图连接，无需添加输入。基本上，这些视图是为 ng-template 中指定的视图节点创建的。与宿主视图不同，嵌入视图与其他视图相连。

   嵌入视图和宿主视图之间的主要区别在于嵌入视图特别链接到模板，而宿主视图链接到组件。

   例子：

   HTML

   import { Component, AfterViewInit, ViewChild,
   ViewContainerRef, TemplateRef } from '@angular/core';
     
   @Component({
     selector: 'app-example',
     template: `
       
   Embedded View Example
        
       
   This is an example of embedded view
       
         
   This view is linked with template
         
   Dynamically Generated!
       
     `
   })
   export class ExampleComponent implements AfterViewInit {
     @ViewChild("template", { read: TemplateRef }) tpl: TemplateRef;
     @ViewChild("container", { read: ViewContainerRef }) ctr: ViewContainerRef;
     
     constructor() { }
     
     ngAfterViewInit() {
       const view =  this.tpl.createEmbeddedView(null);
       this.ctr.insert(view);
     }
   }
   

   输出：

   

TemplateUrl：它是 Angular 组件装饰器中的一个属性。外部模板使用 templateUrl 属性来访问在单独位置定义的 HTML 文件，并且 templateUrl 负责获取该文件的路径。让我们通过一个例子来理解 templateUrl：

例子：

app.component.ts：

Javascript

@Component({
  selector:    'email-list',
  templateUrl: './email-list.component.html',
  providers:  [ EmailService ]
})
export class EmailListComponent implements OnInit {
    title = 'app';
}

app.component.html：

HTML

  
Email List File
  
  
This is a HTML file used by external template and 
     is accessed using templateUrl property
  

输出：

Views	TemplateUrl
Anything that a user sees on the screen	A property used by external templates
Used for creating Single Page Applications	Used to fetch path of the external HTML file
Used to set up multiple views	Does not set up multiple views
It doesn’t take file references	It takes file references