2.组件

一.使用命令生成一个组件

//新打开一个终端
ng g component components/header   //header是在components下新建的组件的组件名

项目结构

//app.module.ts   根模块   所有的项目要在根模块中注册
@NgModule({
  //注册组件
  declarations: [
    AppComponent,       //组件名
    HeaderComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})

1.去components/header/header.component.ts可以查看组件名字

@Component({
  selector: 'app-header',    //组件名称
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.scss']
})

2.去主组件中使用子组件 app.component.html

<app-header></app-headerr>

3.业务要写在*.component.ts中

import { Component, OnInit } from '@angular/core';
@Component({
  selector: 'app-header',    //组件名称
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.scss']
})
export class HeaderComponent implements OnInit {     //写逻辑业务
  public arr:object[]=[{name:"html",age:10},{name:'css',age:30}]
  public imageUrl:string="https://c-ssl.duitang.com/uploads/item/201912/02/20191202100553_HPUuW.thumb.700_0.jpeg"
  public isShow:boolean=false;
  constructor() { }
  ngOnInit() {
  }
}

4.组件中渲染业务部分*.component.html

<div *ngFor="let item of arr">{{item.name}}</div>
<div *ngIf="isShow">你好</div>
<img [src]="imageUrl" alt="">