代码之家 › 专栏 › 技术社区 › webworm

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

angular

0

webworm · 技术社区 · 7 年前

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

2 回复 | 直到 7 年前

1

2

Keenan Diggs 7 年前

这也让我在阅读时感到困惑,但看看下面的回答: In which way does Angular resolve duplicate directive/component selectors?

编辑:

故障的Stackblitz演示: https://stackblitz.com/edit/angular-2zcgz8

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

@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>

2

-1

Samer Ayoub 7 年前

选择器不是对组件的引用,它只是组件类中指定的标记名,以便能够通过使用类似HTML标记在标记中使用此组件。混淆源于组件类名称和选择器名称使用相同的名称“widgetA” 所以,如果您将选择器更改为另一个名称,在.ts和.html文件中都说“widA”,它仍然有效!!