角度组件HTML模板包含对自身的引用

真正让我困惑的事情之一是在组件本身的HTML模板中使用组件的选择器。

widgetA.component.ts

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

// other imports here

@Component({
    selector: 'widgetA',
    templateUrl: './widgetA.component.html',
    styleUrls: ['./widgetA.component.scss']
})
export class WidgetAComponent implements OnInit {
    @Input() property1!: string;
    @Input() property2: string;

    // remainder of class here
}

widgetA.component.html

<div>
<!-- other HTML here -->
  <widgetA
    [property1]="value1" 
    [property2]="value2"
  ></widgetA>
  <widgetB
    [property3]="value3" 
    [property4]="value4"
  ></widgetB>
<!-- other HTML here -->
</div>

我必须假设这是允许的,因为webpack成功编译了代码。我想我想知道这是否是典型的角度?这是一种设计模式吗?在组件本身的HTML模板中包含对组件的引用似乎让我感到困惑。