8 组件

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 vscode插件创建组件

Angular Files
Angular Snippets

2 使用组件

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

3 父子组件传值

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

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

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

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.component.html
    MovieItem.component.css
    MovieItem.component.ts