定义内联和外部模板以及使用相对 URL

2019-11-13 08:00:00 · 飞浪

了解如何以及何时使用 Angular 中的外部和内联模板。

介绍

在本指南中，我们将了解内联和外部模板。在 Angular 中，我们的视图在 HTML 模板中定义，可以是内联的，也可以是外部的。我们将逐一介绍这些模板。

使用内联模板查看

首先，我们将学习如何使用内联模板显示主视图。在本节中，我们将从头开始创建一个组件，而不使用任何 Angular 命令。

在 app 文件夹中创建一个单独的文件夹。在 components 文件夹中，我们将为我们的应用程序创建一个名为“demo”的新文件夹，因为它是一个演示应用程序，并创建一个名为demo.component.ts的Typescript文件。

在演示文件夹中，我们将按照某些步骤来制作组件。这些步骤如下所示：

在 demo/demo.component.ts 中创建导出的类文件
添加@Component装饰器
在 app.module.ts 中添加类名
使用选择器、模板和样式配置@Component装饰器
将选择器以标签形式添加到app.component.ts中

在 demo/demo.component.ts 中创建导出的类文件

创建可以导出到其他地方使用的类。它看起来像下面的代码片段。

      export class DemoComponent {}
    

您可以为您的组件赋予任意名称。

添加@Component 装饰器

在类名顶部添加@Component装饰器@angular/core 。

      @Component({})
export class DemoComponent {}
    

成功制作组件后，我们需要将其注册到app.module.ts文件中。

在 app.module.ts 中添加类名

我们将在@NgModule装饰器的声明数组中添加我们的类名。

      import { BrowserModule } from "@angular/platform-browser";
import { AppComponent } from "./app.component";
import { DemoComponent } from "./components/demo/demo.component";

@NgModule({
  declarations: [DemoComponent],
  imports: [BrowserModule],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}
    

现在我们需要设置我们的@Component装饰器并添加一些 HTML、CSS 以及最重要的选择器。

配置@Component 装饰器

我们将在app.component.html中添加选择器，使其在视图中可见，并添加一些 HTML 内容，以便使用某种样式测试我们的组件。选择器名称可以是任何名称。这取决于你。我将在模板中添加“Hello World”，并在样式中添加文本颜色。最终组件将如下所示：

      import { Component } from "@angular/core";

@Component({
  selector: "app-demo-component",
  template: `
    <strong>Hello World</strong>
  `,
  styles: [
    `
      strong {
        color: red;
      }
    `
  ]
})
export class DemoComponent {}
    

template属性包含我们的 HTML，styles属性包含样式数组。

将选择器添加到 app.component.ts

现在我们将选择器添加到app.component.ts以将我们的视图添加到 DOM 中并使其可见。

      <app-demo-component></app-demo-component>

我们的组件现在可以部署了。在 CMD/终端上运行ng serve命令并检查输出。

如您所见，我们的输出与预期输出完全匹配。我们已经完成了内联模板的使用，您已经掌握了它。但是这种模式有一个限制。假设我们有一千行 HTML 和 CSS 代码。在这种情况下，它会变得奇怪且难以处理。这就是为什么我们总是更喜欢外部模板和外部 CSS。

在下一节中，我将带您了解外部模板和 CSS。

使用外部模板查看

要添加外部模板和样式，我们需要在 demo 文件夹中创建另外两个文件：一个 HTML 文件和一个 CSS 文件。我将它们命名为 demo.component.html 和 demo.component.css。我遵循 Angular 最佳实践和命名约定；您可以选择任何您喜欢的名称。

然后我们将 template 属性的代码移到demo.component.html中。

      <strong>Hello World</strong>

接下来，移动demo.component.css中的样式属性代码

      strong {
  color: red;
}
    

最后，更改demo.component.ts代码。

      import { Component } from "@angular/core";

@Component({
  selector: "app-demo-component",
  templateUrl: "./demo.component.html",
  styleUrls: ["./demo.component.css"]
})
export class DemoComponent {}
    

您可以看到之前的代码和当前代码之间存在一些差异。我们使用templateUrl代替template，并使用styleUrls代替style。

这些更改至关重要，因为 template 和templateUrl属性都表示不同类型的元数据。Angular 根据@Component装饰器中给出的元数据确定要做什么。style、styles 和styleUrls也是如此。

现在你可以看到没有任何区别的输出。

结论

了解何时在 Angular 中使用外部和内联模板至关重要。通过本指南，我希望您已经了解了每个模板的使用方式和时间。

_{免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！}

_查看原文

技术指南

阅读全文

定义内联和外部模板以及使用相对 URL

杭州电子商务研究院

5年前 · 面向社会、服务行业、政产学研结合、整合资源、和谐发展

import { BrowserModule } from "@angular/platform-browser"; import { AppComponent } from "./app.component"; import { DemoComponent } from "./components/demo/demo.component"; @NgModule({ declarations: [DemoComponent], imports: [BrowserModule], providers: [], bootstrap: [AppComponent] }) export class AppModule {}

import { Component } from "@angular/core"; @Component({ selector: "app-demo-component", template: ` <strong>Hello World</strong> `, styles: [ ` strong { color: red; } ` ] }) export class DemoComponent {}

import { Component } from "@angular/core"; @Component({ selector: "app-demo-component", templateUrl: "./demo.component.html", styleUrls: ["./demo.component.css"] }) export class DemoComponent {}