第1天,角度中的组件通信


组件是角度应用的基本构件。更简单地说,我们可以说组件是用户界面/视图元素以及显示和操作数据的机制。

角度团队将一个组件定义为屏幕的补丁,我们称之为视图,它为应用程序声明了可重用的构建块。因此,组件是屏幕上可见的任何东西,可以一次又一次地重复使用。

创建组件

当我们使用角度命令行界面时,我们可以在一个命令中创建组件。如果您不知道如何使用命令行界面设置项目,请访问以下链接:

http://www . c-sharp corner . com/article/angular-basic-and-quikstart-with-CLI/

完成项目设置后,您可以使用以下命令添加我们的新组件:

好的,在我的例子中,我将运行生成组件myfirstcomponent的命令(这是我的组件的名称,您可以自己选择)。这将在您的应用程序中生成以下文件夹结构:

当我们创建组件时,Angular CLI使用组件的名称创建文件夹,并添加文件my IRST component . component . ts,my IRST component . component . spec . ts,myfirstcomponent.component.html,以及my IRST component . component . CSSmyfirstcomponent文件夹中的文件。

我们可以看到的另一个变化是在AppModule.ts文件中。

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

@NgModule({
  declarations: [
    AppComponent,
    MyfirstcomponentComponent
  ],
  imports: [
    BrowserModule
  ],
  exports:[AppComponent],
  providers: [],
  bootstrap: [AppComponent]
})

export class AppModule { }

到目前为止,我们在应用程序中有一个模块,每当我们在命令行界面中添加组件时,它都会直接在应用程序模块中添加该组件,应用程序模块是应用程序的根模块。它导入根模块中的组件,并将其添加到包含模块中所有组件的声明部分。

探索我们的第一个组件

当我们查看第一个组件时,它添加了如下代码片段。

它的主要部分是从角度核心导出组件,这是将类标记为组件所必需的。

接下来需要看到的是:

  1. selector:一个属性,它告诉Angular每当在模板中看到元素时就创建该组件的插入。

  2. templateurl:这是网页的网址,它告诉角度需要在用户界面中显示什么。

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

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

export class MyfirstcomponentComponent implements OnInit {
name:string="John Doe";
constructor() { }
  ngOnInit() {
  }
}

那么它是如何工作的呢?首先,Angular看到组件的选择器,它在HTML中搜索选择器,并替换模板,以便在该部分呈现模板Url。在我们的例子中,选择器是app-myfirstcomponent 模板是myfirstcomponent.component.html文件,该文件将在浏览器中呈现。

如何使用该组件

好的,我们知道如何添加组件和一些基本的东西,所以现在让我们看看如何在视图中使用它们。要使用这个组件,我们必须记住组件的选择器属性,在我们的例子中是app-component要使用它,只需在app.component.html文件:< app-my first component > </app-my first component >。所以代码片段app.component.html就像我下面看到的:

<div >
<h1>
{{title}}
</h1>
<h1>
<app-myfirstcomponent></app-myfirstcomponent>
</h1>
</div>

我们已经看到,选择器将加载指定了组件装饰器的第二个属性(模板Url)的HTML。当我们看到模板网址时,它就像我得到的一样:

<p>
hello {{name}}  your first component works!
</p>

因此,总而言之,我们可以说选择器是组件的名称,它将被角度用来调用HTML文件中的组件。

在组件之间传递数据

好了,我们已经看到了如何在应用程序中创建和使用相同的组件。现在,让我们看看如何在组件之间共享数据。

基本上有四种方法在组件之间传递数据;让我们一个接一个地看。

在此之前,让我们看看我们所说的父组件和子组件是什么意思。父组件是充当其他组件的容器的组件,兄弟组件是不在容器中但与其他组件无关的组件。

以下几点是我们可以在父组件和子组件之间传递数据的方法。

1.父组件到子组件

总是需要在父组件和子组件之间发送数据。让我们一步一步来看看如何实现这一点。

@Input:

这个装饰器用于从组件中获取数据。为此,我对组件进行了更改。让我们使用角度命令行界面在应用程序中添加两个组件,即主组件和子组件ng generate 命令。

添加组件时,请查看子组件的代码片段

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

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

export class ChildComponent implements OnInit

{
  @Input("bindingmessaage") message:string
  constructor() { }
  ngOnInit()
  {

  }
}

这里我们使用了@Input用于使消息成为输入的装饰器;让我们看看@Input装饰者详细地说。在这里,bindingmessage,(这包含在上面的代码中,就像这样:@Input("bindingmessage")用作可以在其他组件中使用的消息属性的别名。

好的,我们已经将消息属性设置为ChildComponent 接受来自父组件的值;那么我们如何给这个变量赋值呢?为此,我们必须检查父组件(记住这是一个父子交互)。我们必须在父组件中为该更改设置该变量的值。

为此,我们必须将子组件添加到主组件中,但是我们该如何做呢?我们这里有选择器供我们使用。让我们看看下面的超文本标记语言(Master.component.html)片段:

Master.component.html

<child bindingmessaage="Message from the Parent Without Binding">

</child> 

app.component.html

<div id="parent-to-child">
    <div>
<master></master>           
    </div>
</div>

这段代码只是将主组件添加到应用程序组件中,这是我们的根组件,而主组件反过来将子组件添加到它的模板中。

当我们运行应用程序时,我们可以看到以下输出:

This is child component

This is Message from parent:: Message from the Parent Without Binding

现在,要将父组件的值传递给子组件,我们必须进行以下更改。

将主组件更新为以下代码片段:

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

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

export class MasterComponent implements OnInit {
  sendgreetingtochild:string="Data from Parent to child using input decorator";
  constructor() { }
  ngOnInit() {
  }

}

在master.component.html文件中的子模板选择器中,进行以下更改:

<p>
<child [bindingmessaage]="sendgreetingtochild"></child> 
</p>

我们在这里做的是,我们正在分配财产的价值sendgreetingtochild bindingmessage子组件的输入。

当我们保存文件时,我们得到以下输出:

This is child component
This is Message from parent:: Data from Parent to child using input decorator

我们可以看到更改后的输出,它与我们在master.component.ts中分配变量值的地方相同。

总之,我们可以说,为了将值从父代传递给子代,必须采取以下步骤:

  1. 使用@input 对于要赋值的属性。例如:@Input("bindingmessaage") message:string  

  2. 使用子组件选择器中的属性。例如:< child[binding message]= " send greeting to child " > </child >

2.将数据从子代传递到父代(使用@Output)和事件发射器

我们已经看到了如何将数据从父组件传递给子组件,现在让我们看看如何使用@output和事件发射器。

在这种情况下,子组件通过使用@output 装饰器和事件发射器。这种变化可以发生在按钮点击或之间的任何数据变化。

为此,我们可以执行以下步骤:

  1. 父母应该准备好接收将被分配和使用的消息。

  2. 孩子应该用@output 和将发出该事件的函数。以及我们想要发送给父组件的消息。

让我们使用ng generate 命令:

  • childwithintputandemintercomponent . component . ts将是我们孩子的组成部分。
  • master withintputaventemitercomponent . component . ts将是我们的主要组成部分。
  • 为了看看我们如何使用@outputdecorator和事件发射器,让我们用下面的代码片段修改子组件。

    import {
        Component,
        OnInit,
        Output,
        EventEmitter
    } from '@angular/core';
    
    @Component({
        selector: 'app-childwithoutputandemiter',
        templateUrl: './childwithoutputandemiter.component.html',
        styleUrls: ['./childwithoutputandemiter.component.css']
    })
    
    export class ChildwithoutputandemiterComponent implements OnInit {
        message: string = "Hello from child"
        @Output("messagefromchid") EventEmitter < string > ();
        EmitValue(): void {
            this.emitmessage.emit(this.Message)
        }
    
        constructor() {}
        ngOnInit() {}
    }

    在理解代码之前,让我们先看一下这个片段中的一些基本内容,特别是@outputEventEmitter

    @输出

    当我们想要将数据发送到组件外部时使用的属性。

    该属性始终与事件发射器结合使用,通过使用传递的事件,可以在组件外部访问该事件发射器。

    事件发射器

    事件发射器在“角度”中用于发射组件中的事件。

    当我们看到上面代码的描述时,我们可以看到我们已经使用了@Output属性,我们将其设置为新的EventEmitter,和我们也有方法EmitValue 它发出message属性设置为主组件。

    接下来,让我们看看主组件如何处理这些值:

    import { Component, OnInit } from '@angular/core';
    
    @Component({
      selector: 'app-masterwithoutputandeventemiter',
      templateUrl: './masterwithoutputandeventemiter.component.html',
      styleUrls: ['./masterwithoutputandeventemiter.component.css']
    })
    
    export class MasterwithoutputandeventemiterComponent implements OnInit {
    
    GreetingsFromChild:string ="Initial message at the master.";
     receivemessage($event):string
      {
    this.GreetingsFromChild=$event;
    return this.GreetingsFromChild;
      }
    
    constructor() { }
      ngOnInit() {
      }}

    在这段代码中,我们已经创建了函数receivemessage它从事件发射器接收值。

    要查看输出,我们必须对子模板和父模板进行一些更改。

    这是有一个输入的子模板(超文本标记语言文件),我们可以看到EmitValue()从子组件中调用。我们需要做的另一个更改是更改主组件,如下所示:

    <p>
     <b> Master component :: </b>
      <br> 
      <b> {{GreetingsFromChild}}</b>
    <br>
    <app-childwithoutputandemiter (messagefromchid)($event)></app-childwithoutputandemiter>
    </p>

    当我们查看代码时,我们可以看到我们已经在主组件中添加了子组件,以便接收输出。我们所做的是我们已经分配了receivemessage($event) messagefromchild

    这是关于数据从父代传递给子代和子代传递给父代。我们会使用其他技术,比如@viewchildu歌唱服务,在下一篇文章中。