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

在Angular2中，组件是应用程序的构建块之一。组件是用于表示应用程序的可重用封装单元。组件使用模板或视图呈现UI，使用控制器来决定模板中表示的UI。在某些情况下，我们需要将字符串传递给组件以控制UI的呈现，那么如何实现呢？

传递字符串给组件

通过在组件定义中声明一个属性并将其作为输入导出，我们可以将字符串传递给组件。该属性将依赖注入到组件，以使该组件可以使用输入数据。

首先，在组件定义中声明一个具有@Input()装饰器的属性，如下所示：

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

@Component({
  selector: 'app-component',
  template: `
    <div>{{inputString}}</div>
  `
})
export class AppComponent {
  @Input() inputString: string;
}

在上面的代码中，@Input()装饰器将输入属性inputString导出到组件中，以使该组件可以使用。

接下来，将该组件添加到主组件中，并传递输入数据。这可以通过使用属性绑定来完成，如下所示：

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

@Component({
  selector: 'app-root',
  template: `
    <app-component [inputString]="'hello world'"></app-component>
  `
})
export class AppComponent { }

在上面的代码中，将inputString的值设置为'hello world'，并通过属性绑定将其传递到AppComponent组件中。在模板中，{{inputString}}将显示传递的字符串。

结论

通过声明具有@Input()装饰器的属性，我们可以将字符串传递给组件。在模板中，我们可以使用绑定将字符串传递到子组件。这是在Angular2中实现组件之间通信的一种非常简单的方法。