angular 截取字符串

In modern web development, many developers prefer to build the UI of a website in a component-based way. It's also supported by all modern frameworks. Understanding how components work and how to use them is a big step in learning Angular.

在现代Web开发中，许多开发人员更喜欢以基于组件的方式构建网站的UI。 所有现代框架也都支持它。 了解组件的工作方式以及如何使用它们是学习Angular的重要一步。

In this post, you're going to learn about Angular components, how to create and use a component in a project, and what string interpolation is. I will also be covering other important features of Angular in my upcoming articles:

在本文中，您将学习Angular组件，如何在项目中创建和使用组件以及什么是字符串插值。 我还将在即将发表的文章中介绍Angular的其他重要功能：

• Part 1: How to install your first App with the Angular CLI

  第1部分： 如何使用Angular CLI安装第一个应用程序

• Part 2: Angular Components and String Interpolation (you’re here)

  第2部分：角度组件和字符串插值(您在这里)

• Part 3: Angular Directives & Pipes

  第3部分 ： 角度指令和管道

• Part 4: One-Way Data Binding in Angular

  第4部分： Angular中的单向数据绑定

• Part 5: Angular Two-Way Data Binding with ngModel

  第5部分： 使用ngModel进行角度双向数据绑定

If you prefer, you can also watch the video version:

如果您愿意，还可以观看视频版本：

什么是组件？ (What is a Component?)

Components are the most basic building blocks of an Angular application. We can think of components like LEGO pieces. We create a component once but can use them many times as we need in different parts of the project.

组件是Angular应用程序的最基本构建块。 我们可以想到乐高积木之类的组件。 我们只创建一个组件，但是可以在项目的不同部分中多次使用它们。

An Angular component is made of 3 main parts:

Angular组件由3个主要部分组成：

• HTML Template —View
  HTML模板-查看
• TypeScript File — Model
  TypeScript文件-模型
• CSS File — Styling
  CSS文件—样式

我们为什么需要组件？ (Why do we need Components?)

Using components is beneficial in many ways. Components divide the UI into smaller views and render data. A component should not be involved in tasks like making HTTP requests, service operations, routing, and so on. This approach keeps the code clean and separates the view from other parts (see separation of concerns).

使用组件在许多方面都是有益的。 组件将UI分成较小的视图并呈现数据。 组件不应参与发出HTTP请求，服务操作，路由等任务。 这种方法可以保持代码整洁，并将视图与其他部分分开 (请参阅关注点分离 )。

Another important reason is that components divide the code into smaller, reusable pieces. Otherwise, we would have to include endless lines of code in a single HTML file, which makes the code much harder to maintain.

另一个重要原因是组件将代码分成了较小的可重用部分。 否则，我们将不得不在一个HTML文件中包含无数行代码，这使得代码难以维护。

创建我们的第一个角度组件 (Creating Our First Angular Component)

Now let's create our first component. The short way to create a component is by using Angular CLI:

现在，让我们创建第一个组件。 创建组件的简短方法是使用Angular CLI：

This command creates a brand new component with its own files (HTML, CSS, and TypeScript) and registers it to the App Module automatically:

此命令使用其自己的文件(HTML，CSS和TypeScript)创建一个全新的组件，并将其自动注册到App Module：

Note: In Angular, we need to register every necessary service, component, and module to a module file.

注意：在Angular中，我们需要将每个必要的服务，组件和模块注册到模块文件中。

Now let's take a closer look at the component model (TypeScript Component File):

现在，让我们仔细看一下组件模型(TypeScript组件文件)：

This is actually a TypeScript class but to define it as a component:

这实际上是TypeScript类，但将其定义为组件：

• First of all, we need to import Component from the @angular/core library, so we can use the component decorator

  首先，我们需要从@ angular / core库导入Component ，因此我们可以使用组件装饰器

• The @Component decorator marks the class as a component and allows us to add the following metadata

  @Component装饰器将类标记为组件，并允许我们添加以下元数据

• The selector is for calling the component later as an HTML tag: <app-root> </app-root>

  选择器用于以后以HTML标签的形式调用组件： <app-root> </app-root>

• TemplateUrl is the path where the HTML View of the component is.

  TemplateUrl是组件HTML视图所在的路径。

• Style URLs (can be more than 1) is where the styling files of the component are.

  样式URL (可以大于1)是组件的样式文件所在的位置。

• Finally, we export the class (component) so that we can call it inside the app.module or other places in the project later.

  最后，我们导出类(组件)，以便稍后可以在app.module或项目中的其他位置调用它。

什么是字符串插值？ (What is String Interpolation?)

One of the most common questions people ask about Angular is what that curly braces syntax is. Components render data, but data can change in time, so it needs to be dynamic.

人们对Angular提出的最常见问题之一是花括号语法是什么。 组件呈现数据，但是数据会随时间变化，因此它必须是动态的。

We use curly braces inside other curly braces to render dynamic data: {{ data }} and this representation is called string interpolation. You can see the example in the video version above.

我们在其他花括号内使用花括号来呈现动态数据： {{ data }} ，这种表示形式称为字符串插值。 您可以在上面的视频版本中看到示例。

结语 (Wrap Up)

One of the biggest steps of learning Angular is to know how to create components and use them efficiently. I hope you find this post helpful. In the next part, we are going to take a look at the Angular Directives like ng-if, ng-for, ng-class, and more. Stay tuned :)

学习Angular的最大步骤之一就是知道如何创建组件并有效地使用它们。 希望这篇文章对您有所帮助。 在下一部分中，我们将研究Ang- Directives，例如ng-if，ng-for，ng-class等。 敬请关注 ：)

If you want to learn more about Web Development, feel free to follow me on Youtube!

如果您想了解有关Web开发的更多信息，请 随时 在YouTube上关注我 ！

Thank you for reading!

感谢您的阅读！

翻译自: https://www.freecodecamp.org/news/angular-9-for-beginners-components-and-string-interpolation/

angular 截取字符串