Question

我正在查看一位同事的Angular代码，在学习Angular方面，他比我自己要了解得多。

让我真正困惑的一件事是在组件本身的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模板中包含对组件的引用似乎让我感到困惑。

Answer 1

这也使我在阅读时感到困惑，但请查看以下回复：In which way does Angular resolve duplicate directive/component selectors?

基本上，模板中的“ widgetA”是对从另一个模块导入的组件的引用。如果您尝试使用相同的组件引用本身，则应用程序将陷入递归循环中，并且永远无法解析。在我尝试创建的单组件堆叠闪电中就是这种情况，并且它没有响应。

编辑：

失败的Stackblitz演示：https://stackblitz.com/edit/angular-2zcgz8

以您描述的方式递归调用组件时，这是控制台错误：

基本上，在我的示例中，我有一个SomeComponent类，带有@Component装饰器和选择器“ some”，如下所示：

@Component({
  selector: 'some',
  templateUrl: './some.component.html'
})
export class SomeComponent {
  @Input() input1: string;
  @Input() input2: string;
}

我的some.component.html包含：

<p>{{input1}}<p>
<p>{{input2}}</p>

<some [input1]='hi'></some>

Answer 2

选择器不是对组件的引用，它只是在组件类中指定的标记名称，以便能够通过使用类似的HTML标记在我们的标记中使用此组件。混淆来自于使用相同名称“ widgetA”作为组件类名称和选择器名称因此，如果将选择器更改为其他名称，则在.ts和.html文件中都说“ widA”仍然有效！

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

2 个答案:

编辑：