angular入门基础教程(二）第一个angular组件

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>

效果图