DoubleRight The past of the world Blog's

Angular 模板和视图

Angular 模板和视图

原文： https://howtodoinjava.com/angular/angular-templates-and-views/

1. 什么是 Angular 模板和视图

模板是 HTML 代码段，它告诉 Angular 如何在 angular 应用中渲染组件。

模板立即与组件相关联，以定义该组件的视图。

2. Angular 视图层次结构

该组件还可以包含视图层次结构，这些层次结构具有嵌入的视图，这些视图定义或与其他组件相关联。

视图层次结构可以包含来自同一 Ng 模块中组件的视图，但是它也可以包含来自不同 Ng 模块中定义的组件的视图。

关于视图层次结构的要点如下：

  • 它是相关视图的树，可以充当一个独立的单元。
  • 根视图通常称为组件的宿主视图。
  • 它在 Angular 变化检测中起着重要作用。

2.1 查看层次结构示例

下图显示了管理超级英雄和危机中心的应用的视图层次结构。

  • 应用组件位于根级别，称为主机视图，其中包含英雄和危机中心组件。
  • 英雄组件充当其子组件英雄列表和英雄详细信息的宿主视图，它们将具有各自的视图。
  • 同样，危机中心组件还托管两个子组件，分别包含针对危机列表和危机详细信息组件的视图。

在此，层次结构中的每个组件都可以具有与其关联的视图。

3. 模板类型

有两种方法可以在 Angular 组件中定义模板。

3.1 内联模板

内联模板是通过将 HTML 代码放在“反引号”中定义的，并使用@Component装饰器的模板属性链接到组件元数据。

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-zipcode',
  template: `
            <p>
            zipcode inline template
            </p>
            `,
  styleUrls: ['./zipcode.component.css']
})

export class ZipcodeComponent implements OnInit {

  constructor() { }

  ngOnInit() { }
}

要使用@angular/cli定义内联模板，请使用以下命令：

ng generate component zipcode -it

3.2 模板文件

模板是在单独的 HTML 文件中定义的，并使用@Component装饰器的templateUrl属性链接到组件元数据，例如：

<p>
  zipcode separate HTML template
</p>


import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-zipcode',
  templateUrl: './zipcode.component.html',
  styleUrls: ['./zipcode.component.css']
})
export class ZipcodeComponent implements OnInit 
{
  constructor() { }

  ngOnInit() {
  }
}

学习愉快！

搜索