ng中的语法跟vue中是一样的插值语法，其实也是早期vue抄的ng的思路，使用{{variable}}形式，vue借鉴了ng和react，这个我们就不多了。

新建一个子组件

在项目根目录下面，执行

ng g component ./components/UserList

这样就为我们生成好了一个组件的基本结构，我们可以在里面编写自己的代码。

编写子组件

user-list.component.html

<div class="user"><p>user-list works!</p>
</div>

user-list.component.css

.user {color: red;
}

导入子组件

在 app.module.ts 中导入子组件

import { UserListComponent } from "./components/user-list/user-list.component";

然后在 imports 数组中添加子组件

@Component({selector: "app-root",standalone: true,imports: [RouterOutlet, UserListComponent],templateUrl: "./app.component.html",styleUrl: "./app.component.css",
})
export class AppComponent {name = "Admin";
}

使用子组件

在 app.component.html 中使用子组件

<main class="main"><p>Welcome to Angular!{{name}}</p><h3>下面是子组件的内容</h3><app-user-list />
</main>

效果图