巢狀元件

元件將在各自的 selector 中呈現，因此你可以使用它來巢狀元件。

如果你有一個顯示訊息的元件：

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

@Component({
  selector: 'app-required',
  template: `{{name}} is required.`
})
export class RequiredComponent {
  @Input()
  public name: String = '';
}

你可以使用 app-required（這個元件的選擇器）在另一個元件中使用它：

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

@Component({
  selector: 'app-sample',
  template: `
    <input type="text" name="heroName" />
    <app-required name="Hero Name"></app-required>
  `
})
export class RequiredComponent {
  @Input()
  public name: String = '';
}