AngularJS中视图和模板Url的区别

在这篇文章中，我们将看到什么是AngularJS中的Views和TemplateUrl，同时通过代码片段了解它们的基本用法，最后看到它们之间的一些区别。

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

视图的类型：不同类型的视图描述如下。

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

例子：这个例子解释了AngularJS中视图容器的基本用途。

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

输出:

AngularJS中视图和模板Url的区别

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

例子：在这个例子中，为了使任何主机视图发挥作用，必须存在一个容纳视图的视图容器。我们这里有两个视图容器<app-example> 和<ng-container> 。

import { Component } from "@angular/core";
  
@Component({
  template: `
    <h1>Host View</h1>
    <h3>Dynamically Generated!</h3>
  `,
})
export class AnotherComponent {}

import { AfterViewInit, Component, ViewChild,
         ViewContainerRef, 
         ComponentFactoryResolver } from "@angular/core";
import { AnotherComponent } from "./another.component";
  
@Component({
  selector: "app-example",
  template: `
    <h1>Application Content</h1>
    <ng-container #container></ng-container>
    <h3>Application using host views</h3>`,
  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);
  }
}

输出:

AngularJS中视图和模板Url的区别

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

嵌入视图和宿主视图的主要区别是，嵌入视图特别与模板相联系，而宿主视图则与组件相联系。

例子：这个例子解释了AngularJS中嵌入式视图的基本使用。

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

输出:

AngularJS中视图和模板Url的区别

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

例子：这个例子解释了AngularJS中TemplateUrl的基本使用。

app.component.ts:

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

app.component.html:

<!DOCTYPE html>
<html>
  
<body>
    <h2>Email List File</h2>
    <p>
        This is a HTML file used by external 
        template and is accessed using
        templateUrl property
    
</body>
  
</html>

输出:

AngularJS中视图和模板Url的区别

]区别:

Views	TemplateUrl
用户在屏幕上看到的任何东西。	一个由外部模板使用的属性。
用于创建单页应用程序。	用于获取外部HTML文件的路径。
用来设置多个视图。	不设置多视图。
它不接受文件引用。	它需要文件引用。