1-1 创建组件

angular组件官网

# 使用命令创建
//ng g component <component-name>
ng g component components/MovieItem

Tips:每创建一个组件都会在app.module.ts文件中导入，注册

//app.module.ts
import { MovieItemComponent } from './components/movie-item/movie-item.component';
@NgModule({
  /* 配置(声明)当前项目运行依赖的组件 */
  declarations: [
    AppComponent,
    MovieItemComponent
  ],
})

1-1-1 vscode插件创建组件

Angular Files
Angular Snippets

1-2 使用组件

//app.component.html
<app-movie-item></app-movie-item>

1-3 父子组件传值

//1.子组件自定义属性接收父组件传递过来的参数
<app-movie-item [title]="title"></app-movie-item>

//2.在子组件中使用@Input进行注册
import {Component,OnInit,Input} from '@angular/core';
export class MovieItemComponent implements OnInit {
  @Input() title!:String;
}

//3.在子组件的模板中直接使用
<p>{{title}}</p>

1-4 wechat,vue,react,angular组件比较

wechat/App
    App.js
    App.wxml
    App.wxss
    App.json
Vue
    App.vue(html,css,js)
React
    App.js(html,js)  import './App.css'
    App.css
Angular
    MovieItem.html
    MovieItem.css
    MovieItem.ts

vue-cli wechat vue-ts

angualr react