什么是 Angular 中组件的 Host 元素

Question

如果我有 Component 类

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit {
}

和 index.html 是

<div>
<my-app></my-app>
</div>

组件的宿主元素是什么？会是<div>还是<my-app>？如果是<my-app>，有没有办法从 访问<div>（的父AppComponent）AppComponent？

Answer 1

对于指令，它是指令附加到的元素。例如h1是下面示例中的宿主元素

<h1 my-directive>
</my-comp>

对于组件，它是组件的选择器。例如

selector: 'my-comp'
template: '
<h1> some heading </h1>
.....

<my-comp></my-comp>  <!-- my-comp is the host element of h1 -->