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