1.新建组件,使用命令建

建完组件之后不用在根组件(父组件)中导入,它会自动导入

  1. ng g component components/content      //content是新建的组件名

2.项目结构

image.png

1.app是根组件(父组件)

1.1app.component.html

  • 主要是写界面的
  • 也可以使用子组件，直接写子组件的名字，组件名在.component.ts文件的selector中

  • image.png

  • image.png

    1.2app.component.scss

  • 主要是给界面写样式

  • 如果在这个里面写样式，会自动生成两个.css的文件

  • image.png

    1.3app.component.ts

  • 主要写业务逻辑，发送请求等

  • 可以在@component({selector:;app-rout})查看组件名，方便组件使用

  • image.png

    1.4app.module.ts

  • 主要是一些项目需要的模块，还有每个子组件都会在里面导入

    2.list是新建的子组件

    里面的所有结构都和app一样，但是它没有.module.ts文件

    image.png