组件中的角度显示元素 - TypeScript

在 Typescript 中，组件是用于封装 HTML 元素的可重用代码块。组件包括单独的 HTML 元素，它们可以被多次使用，而不必复制同样的 HTML 代码。

创建组件

要创建一个组件，我们需要定义一个类。这个类必须继承 Component，并用 @Component 装饰器标记。这个装饰器中包含了一个以对象形式表示的元信息，例如组件的选择器和模板。

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

@Component({
  selector: 'my-component',
  template: '<h1>Hello World!</h1>'
})
export class MyComponent { }
```

在这个例子中，我们定义了一个名为 MyComponent 的组件。他的选择器是 my-component，它的模板是一个简单的 HTML 元素。

在模板中使用元素

现在我们已经定义了一个组件，我们可以在模板中使用这个元素。

```html
<my-component></my-component>
```

当 Angular 渲染这个模板时，它会自动将 my-component 替换为 MyComponent 类的实例。这个实例将根据我们在前面定义的模板进行渲染。

组件之间传递数据

组件之间的通信是通过输入和输出进行的。输入允许外部组件（或模板）向组件传递数据。输出则允许组件向外部发送事件。

输入

要定义输入，我们需要在组件类中定义一个带 @Input 装饰器的属性。

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

@Component({
  selector: 'my-child-component',
  template: '<h1>{{ message }}</h1>'
})
export class MyChildComponent {
  @Input() message: string;
}
```

在这个例子中，我们定义了一个名为 MyChildComponent 的组件，它接受一个名为 message 的输入。我们在这个组件的模板中使用了这个输入。

现在我们可以在另一个组件中使用 MyChildComponent，并传递一个名为 message 的输入。

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

@Component({
  selector: 'my-parent-component',
  template: '<my-child-component [message]="greeting"></my-child-component>'
})
export class MyParentComponent {
  greeting = 'Hello World!';
}
```

在这个例子中，我们定义了一个名为 MyParentComponent 的组件，并将 MyChildComponent 作为子组件使用。我们使用了 [message] 语法来向 MyChildComponent 传递输入。

输出

要定义输出，我们需要在组件类中定义一个带 @Output 装饰器的事件。

```typescript
import { Component, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'my-child-component',
  template: '<button (click)="onClick()">Click Me</button>'
})
export class MyChildComponent {
  @Output() myEvent = new EventEmitter();

  onClick() {
    this.myEvent.emit('Hello World!');
  }
}
```

在这个例子中，我们定义了一个名为 MyChildComponent 的组件，并定义了一个名为 myEvent 的输出。当用户点击按钮时，我们将一个名为 Hello World! 的字符串通过 myEvent 发送。

现在我们可以在另一个组件中使用 MyChildComponent，并监听 myEvent 输出。

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

@Component({
  selector: 'my-parent-component',
  template: '<my-child-component (myEvent)="onEvent($event)"></my-child-component>'
})
export class MyParentComponent {
  onEvent(message) {
    console.log(message); // 输出 "Hello World!"
  }
}
```

在这个例子中，我们定义了一个名为 MyParentComponent 的组件，并将 MyChildComponent 作为子组件使用。我们监听了 myEvent 输出，并在输出触发时调用 onEvent 方法。

总结

在这篇文章中，我们介绍了在 TypeScript 中创建组件的方法。我们了解了组件如何在模板中使用，以及如何使用输入和输出在组件之间传递数据。这些是 Angular 中组件的基础知识，透彻理解后可更加灵活地构建应用程序。