了解嵌套组件的用途

2019-12-02 08:00:00 · 飞浪

介绍 Angular应用程序可以包含数千个组件，管理数据通信可能很复杂。为了解决这个问题，我们需要父子组件通信来传递数据，以便我们的应用程序将来易于管理。在Angular中，我们可以拥

介绍

Angular 应用程序可以包含数千个组件，管理数据通信可能很复杂。为了解决这个问题，我们需要父子组件通信来传递数据，以便我们的应用程序将来易于管理。

在 Angular 中，我们可以拥有一个父组件的子组件，其中子组件具有自己的业务逻辑和设计，可以作为整个组件的一个小功能单元。

例如，我们有一个聊天应用程序，其中一个页面可能包含多个子组件，例如标题组件、正文组件、聊天文本框组件和按钮组件。总而言之，我们有一个完整的聊天父组件。

什么是嵌套组件？

Angular 允许我们拥有不同的子组件或嵌套组件，这些组件与我们通常在 Angular 应用程序中使用的组件相同。它们之间的区别在于，这个子组件包含可以作为单个单元用于父组件的逻辑。

与父组件关联的每个子组件称为嵌套组件。

此外，嵌套组件的一个用途是将数据从子组件发送到父组件，以便父组件可以根据子组件提供的指令触发操作。

为什么我们需要嵌套组件

众所周知，每个应用程序可能包含大量文件，并且当应用程序开始增长时，维护这些文件树和应用程序的功能可能变得不可能。

在 Angular 中，我们有嵌套组件，这使得我们可以将可重用的逻辑放入单独的单元中，这些单元可以同时与一个或多个不同的组件相关联。

如何创建嵌套组件

正如我们所讨论的，嵌套组件是一个普通组件，但我们将它与父组件一起使用以在它们之间传递数据。

让我们看一个简单的例子，我们将使用 Angular CLI 创建两个不同的嵌套组件并将它们与父组件一起使用。

生成nestedcomponent1：

      ng generate component nestedcomponent1

生成nestedcomponent2：

      ng generate component nestedcomponent2

在这里，我们使用 CLI 创建了两个不同的组件，但在继续嵌套组件之前，我们需要在应用程序的根模块文件app.module.ts中声明它，它看起来像这样。

      import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';

// Creatd nested component

import { Nestedcomponent1Component } from'./nestedcomponent1/nestedcomponent1.component';

import { Nestedcomponent2Component } from'./nestedcomponent2/nestedcomponent2.component';

@NgModule({
  imports: [BrowserModule, FormsModule],
  declarations: [AppComponent, Nestedcomponent1Component, Nestedcomponent2Component],
  bootstrap: [AppComponent]
})

export class AppModule { }
    

在此文件中，我们导入了两个嵌套组件，导入后，我们需要将该组件指定到名为声明的数组中。这意味着我们已经声明该组件可以被应用程序使用。

现在让我们打开一个名为app.component.html的文件并放入源代码。

      <app-nestedcomponent1></app-nestedcomponent1>

<app-nestedcomponent2></app-nestedcomponent2>

这里我们指定了之前创建的嵌套组件的选择器标签，通过使用这样的选择器，我们将能够将该子组件的视图部分渲染到父组件中。

让我们改变同一个文件并添加一条静态消息，以便我们可以看到差异。

      <p>
    This is parent component
</p>

<app-nestedcomponent1></app-nestedcomponent1>
<app-nestedcomponent2></app-nestedcomponent2>
    

现在，当我们运行这个示例时，我们可以看到输出：

正如我们在上面的截图中看到的，第一行是我们已经添加的静态行，另外两行是嵌套组件的视图部分。

因此，每当我们的父组件被渲染时，嵌套组件的视图也将被渲染。

这只是一个简单的示例，展示了如何将嵌套组件的选择器放入父组件并呈现内容。现在让我们尝试另一个示例，将数据从父组件传递到子组件。

将数据从父组件传递到嵌套组件

我们将使用嵌套组件与子组件之间传递数据，并根据各种指令执行操作。

为了从父级传递数据并将值放入嵌套组件中，我们使用@Input装饰器，这是一种用于将表达式绑定到指令中的属性指令。

@Input装饰器用于从组件获取输入值，并根据提供的指令进行处理。

让我们看一个简单的例子，其中我们将使用一个数组值，将其传递给嵌套组件，最后使用@Input装饰器获取它。

为此，让我们使用下面的npm命令创建一个名为employeelist的新组件。

      Ng generate component employeelist

创建组件后，打开该文件并粘贴以下源代码行。

员工列表.组件.html

      <p>
    employeelist works!
</p> 
<div>
    <ul>
        <li *ngFor="let item of employeelist">{{ item }}</li>
    </ul>
</div>
    

在此文件中，我们有简单的div以及无序列表项，我们将通过@Input装饰器从父组件中获取它们，因此我们需要像这样将其声明到子组件中：

员工列表.组件.ts

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

@Component({
  selector: 'app-employeelist',
  templateUrl: './employeelist.component.html',
  styleUrls: ['./employeelist.component.css']
})

export class EmployeelistComponent implements OnInit {

  // Input decorator
  @Input() employeelist : string[];

  constructor() { }

  ngOnInit() {
  }

}
    

如我们所见，我们有完整的组件文件，其中导入了@Input装饰器。

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

然后我们就可以将其使用到组件中了。

      // Input decorator

  @Input() employeelist : string[];

employeelist是一个变量，我们将使用它进入模板文件来获取数据并将其呈现下来。

现在我们已经完成了employeelist嵌套组件，现在是时候从父组件传递实际数据了。

为此，打开app.component.ts，源代码将如下所示：

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})

export class AppComponent  {

  employeelist = [
    'Test Employee 1',
    'Test Employee 2',
    'Test Employee 3',
    'Test Employee 4',
    'Test Employee 5'
  ];

  ngOnInit() {
    console.log(this.employeelist)
  }

}
    

在这个父组件中，我们已经声明并分配了值给它，这是我们要发送给子组件的简单变量。

现在打开app.component.html文件并粘贴以下源代码行：

      <app-employeelist 
    [employeelist]="employeelist">
</app-employeelist>
    

在此文件中，我们使用了嵌套组件的选择器app-employeelist，以便呈现嵌套组件的内容，但是除了选择器之外，我们还使用了附加属性：

      employeelist]="employeelist"

在这种情况下，属性的名称和其值是相同的，但是没有必要这样做。

您可能会感到困惑，因为我将[ ]与属性一起使用，但这只是一种属性绑定。任何时候我们想要将属性与动态值绑定，属性绑定都很有用。

现在我们完成了示例，它显示了父组件中数组的项目列表并将它们传递给子组件，其中我们使用无序列表来显示项目列表。

当我们运行上述示例时，我们得到如下输出：

正如您在上图中所看到的，我们已经从来自父组件的数组employeelist中渲染了项目列表。

这就是我们如何通过@Input装饰器将数据或输入从父级传递到嵌套组件，并且我们有很多选择。

如何将动态输入传递给嵌套组件

在 Angular 中，我们可以使用不同的方法将数据从父组件传递到嵌套组件。我们已经看到了一个使用@Input装饰器从父组件获取输入值到子组件的示例。

同样，我们也可以使用@Input装饰器将动态输入值传递给子组件。

让我们看一个简单的例子，我们将使用输入框进入父级，每当用户更改值时，它将反映并由嵌套组件显示。

为此，我们将使用以下 CLI 命令创建一个名为nestedinput的组件。

      Ng generate component nestedinput

<font style="vert

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

_查看原文

技术指南

阅读全文

了解嵌套组件的用途

杭州电子商务研究院

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

import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { FormsModule } from '@angular/forms'; import { AppComponent } from './app.component'; // Creatd nested component import { Nestedcomponent1Component } from'./nestedcomponent1/nestedcomponent1.component'; import { Nestedcomponent2Component } from'./nestedcomponent2/nestedcomponent2.component'; @NgModule({ imports: [BrowserModule, FormsModule], declarations: [AppComponent, Nestedcomponent1Component, Nestedcomponent2Component], bootstrap: [AppComponent] }) export class AppModule { }

import { Component, OnInit, Input } from '@angular/core'; @Component({ selector: 'app-employeelist', templateUrl: './employeelist.component.html', styleUrls: ['./employeelist.component.css'] }) export class EmployeelistComponent implements OnInit { // Input decorator @Input() employeelist : string[]; constructor() { } ngOnInit() { } }

import { Component } from '@angular/core'; @Component({ selector: 'my-app', templateUrl: './app.component.html', styleUrls: [ './app.component.css' ] }) export class AppComponent { employeelist = [ 'Test Employee 1', 'Test Employee 2', 'Test Employee 3', 'Test Employee 4', 'Test Employee 5' ]; ngOnInit() { console.log(this.employeelist) } }