请教：如何在Angular（非Angular JS）中实现组件嵌套及指定结构？

没问题！我来一步步教你实现这个组件嵌套需求，核心就是利用组件创建和**内容投影（ng-content）**来完成，操作起来很直观。

1. 快速创建所需组件 #

用Angular CLI生成四个组件（CLI会自动把它们注册到根模块AppModule里，省掉手动配置的麻烦）：

ng g c main
ng g c header
ng g c content
ng g c footer

2. 配置子组件的模板与样式 #

因为你需要在子组件标签里直接写内容（比如<app-header>This is title</app-header>），所以要用到ng-content——它相当于子组件的"内容插槽"，用来接收父组件传入的内容。

处理Header组件

打开header.component.html，修改为：

<div class="header">
  <ng-content></ng-content>
</div>

对应的header.component.css可添加基础样式：

.header {
  background-color: #f0f0f0;
  padding: 1rem;
  font-size: 1.3rem;
  font-weight: 600;
}

处理Content组件

打开content.component.html：

<div class="content">
  <ng-content></ng-content>
</div>

对应的content.component.css：

.content {
  padding: 2rem;
  min-height: 250px;
}

处理Footer组件

打开footer.component.html：

<div class="footer">
  <ng-content></ng-content>
</div>

对应的footer.component.css：

.footer {
  background-color: #f0f0f0;
  padding: 1rem;
  text-align: center;
  font-size: 0.9rem;
}

3. 配置主组件（Main）的嵌套结构 #

打开main.component.html，按照你想要的层级嵌套子组件：

<div class="main">
  <app-header>This is title</app-header>
  <app-content>Bla bla bla</app-content>
  <app-footer>Bye bye</app-footer>
</div>

给主容器加个基础样式（main.component.css）：

.main {
  max-width: 1200px;
  margin: 2rem auto;
  border: 1px solid #eee;
}

4. 在根组件中引入主组件 #

最后打开app.component.html，替换默认内容为：

<app-main></app-main>

现在运行ng serve，你就能看到和目标结构完全一致的组件嵌套效果了！ng-content的好处是让子组件更灵活，你不仅能传文本，还能在子组件标签里插入其他HTML元素甚至子组件。

内容的提问来源于stack exchange，提问作者Ravi Kavaiya