如何使用Angular2将字符串传递给组件？

在angular2中，具有自身逻辑和数据的组件被视为“视图” 。数据绑定是将数据值与其相应表示形式进行组合的过程。对于组件，可以直接将字符串值作为字符串字面量或通过将字符串字面量存储在变量中来传递字符串值。有3种方式将字符串值传递给angular2中的组件。字符串值绑定在组件的模板部分中描述。

将字符串值从其类传递给组件：在这里，消息变量将从类的构造函数或使用角度事件绑定(用户输入)获取其值。

句法：

{{message}}

示例：这是将字符串传递给组件的最简单方法。组件“ AppComponent”具有一个名为“ app-display”的选择器，显示模板定向到“ app.component.html”。当组件的类包含字符串数据时，组件可以通过对“ content”变量进行插值来访问它。

• app.component.ts

  import { Component } from '@angular/core';
  @Component({ 
      selector: 'app-display',
      template: `app.component.html`
  })
  export class AppComponent {
      content : string = "Hello World";
  }
  

• app.component.html

  GeeksForGeeks
   {{content}} 
  

• 输出：

  GeeksForGeeks
  Hello World

2.在嵌套组件之间传递字符串值：这里， inputField是属性，message是保存所需字符串的变量。组件之间的交互可以使用两个装饰器来完成。

1. @输入()
2. @输出()

句法：

1. @Input装饰器：可以使用类中的@Input装饰器和组件装饰器的指令属性，将字符串从父组件传递到子组件。当使用@Input装饰器声明子组件中的变量时，子组件可以从父组件模板“接收”该变量。

示例：容器组件(父组件)应将“发送”的值传递给嵌套的组件(子组件)。使用属性绑定，绑定目标“消息”从绑定源“发送”获取内容。父组件的组件装饰器的指令属性指定需要使用“ childComponent” 。在接收方，子级具有@Input装饰器，该装饰器从父级接收字符串并相应地使用它。

• parent.component.ts

  import { Component } from '@angular/core';
    
  @Component({
    selector: 'parent',
    template: 'parent.component.html',
    directives: [ChildComponent];
    
  })
  export class parentComponent {
    send: string;
    
    constructor() {
      this.send = 'A message from parent';
    }
  }
  

• parent.component.html

  GeeksForGeeks
  I am parent
  
  

• child.component.ts

  import { Component, Input } from '@angular/core';
    
  @Component({
    selector: 'child',
    template: 'child.component.html',
  })
  export class childComponent {
    @Input() message: string;
  }
  

• child.component.html

  I am child
  {{message}}
  

• 输出：

  GeeksForGeeks
  I am parent
  I am child
  A message from parent

2. @Output装饰器：此方法用于从子级发出数据，由父级接收。为了使@Output装饰器装饰嵌套类的任何属性，该属性类型必须是一个事件。嵌套组件可以将数据传递回其容器的唯一方法是使用事件。要传递的数据称为事件有效负载。在angular2中，使用EventEmitter对象定义事件。

示例：子组件将使用@Output属性具有EventEmitter对象的实例。调用一个函数(在这里单击按钮)以触发字符串的传递。另一方面，使用指令装饰器将子组件绑定到其上的父组件将使用另一个可按兴趣使用的函数来接收有效负载。

• parent.component.ts

  import { Component } from '@angular/core';
    
  @Component({
    selector: 'parent',
    template: `parent.component.html`,
    directives: [ChildComponent]
  })
    
  export class ParentComponent {
      
    parentText = 'I am Parent';
    
    constructor () { }
      
    recievemsg($text) {
      this.parentText = $text;
    }
  }
  

• parent.component.html

   {{ username }} 
  
  

• child.component.ts

  import { Component, Output, EventEmitter } from '@angular/core';
    
  @Component({
    selector: 'child-',
    template: `child.component.html`,
  })
    
  export class ChildComponent {
    message: string = "Message From Child";
    
    // New EventEmitter object for emitting string
    @Output() messageEmitter = new EventEmitter();
      
    sendmsg() {
        
      // Emit message on click
      this.messageEmitter.emit(this.message); 
    }
  }
  

• child.component.html

  GeeksForGeeks 
  Child called
   Send Message 
  

• 输出：

  GeeksForGeeks
  Child called
  I am Parent
  Message from child

注意：以上两种方法用于通过插值将字符串传递给组件。

将字符串值直接传递给组件而无需插值：在这里，“消息”本身就是字符串，并作为组件的inputField属性的输入给出。

句法：

(or)

(or) 
 

示例：下面的示例涵盖了所有三种方法。

• app.component.ts

  import { Component } from '@angular/core';
  @Component({
    selector: 'example',
    templateUrl: './app.component.html',  
  })
  export class AppComponent  {
  }
  

• app.component.html

• 输出：

  GeeksForGeeks1
  GeeksForGeeks2
  GeeksForGeeks3