angular公共组件的写法

Posted 2022-12-12 头名字W

angular的最大的优点便是它的组件化和模块化，本文要讲的是它的组件化:
说到组件就必须说到组件通信，公共组件的通信方式就是父子组件通信．
父子组件通信的三要素：　input ,output和emit()
@Input() 定义输入的变量
@Output() 定义输出变量

首先是子组件
popup.html

<div class="popup-wrapper">
  <div class="title">
    <p>Bank Name: bankName</p>
    <p>Account Id: id</p>
    <button (click)="show()">显示</button>
    <button (click)="hide()">隐藏</button>
  </div>
  <div class="content" *ngIf="flag">
    <button (click)="toggle()">Toggle</button>
    <div [hidden]="!visible">
      <p>提示信息</p>
    </div>
  </div>
</div>

popup.component.ts

import  Component, OnInit, Input, Output, EventEmitter  from '@angular/core';

@Component(
  selector: 'app-popup',
  templateUrl: './popup.component.html',
  styleUrls: ['./popup.component.scss']
)
export class PopupComponent implements OnInit 
  @Input() bankName: string;
  @Input('account-id') id: string; // 可选的仅供模板中使用的名字,默认就是绑定属性的名字
  @Output() showPopoup: EventEmitter<any> = new EventEmitter()
  @Output() hidePopoup: EventEmitter<any> = new EventEmitter()

  constructor()  
  public flag:boolean = false;
  visible: boolean = true;

  show() 
    this.flag = true;
    this.showPopoup.emit(true);
  
  hide() 
    this.flag = false;
    this.hidePopoup.emit(false);
  
  toggle() 
    this.visible = !this.visible;
  

  ngOnInit() 
  

如果定义的公共组件在多个文件中被引入，那么需要在单独定义一个**.module.ts文件，然后在父组件所在的模块中引入，否则多次引入组件会报错．

common-component.module.ts

• 如果定义的组件只使用一次，那么只需要在父组件的**.module.ts中申明就行了．

import  NgModule  from '@angular/core';
import  CommonModule  from '@angular/common';

import  PopupComponent  from "./popup/popup.component";

@NgModule(
  // 导入公共模块
  imports: [
    CommonModule
  ],
  // 申明组件
  declarations: [
    PopupComponent
  ],
  // 到出公共组件
  exports: [
    PopupComponent
  ]
)
export class CommonComponent

在父组件引入子组建前，先要在父组件的module文件中引入

import BrowserModule from '@angular/platform-browser';
import NgModule from '@angular/core';

import AppRoutingModule from './app-routing.module';
import AppComponent from './app.component';
import FormComponent from './form/form.component';
import ReactiveFormsModule from '@angular/forms';
import  CommonComponent  from "./component/comon-component.module";

@NgModule(
  declarations: [
    AppComponent,
    FormComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    ReactiveFormsModule,
    CommonComponent
  ],
  providers: [],
  bootstrap: [AppComponent]
)
export class AppModule 

父组件
form.html

<app-popup bankName="popup" account-id="1" (showPopoup)="show($event)" 
(hidePopoup)="hide($event)">
  <p style="color: tan">我是当前插入的内容</p>
</app-popup>

form.component.ts

import  Component, OnInit  from '@angular/core';
import FormArray, FormBuilder, FormControl, FormGroup from '@angular/forms';

@Component(
  selector: 'app-form',
  templateUrl: './form.component.html',
  styleUrls: ['./form.component.css']
)
export class FormComponent implements OnInit 
  constructor() 
  
  show(value) 
    console.log(value)
  
  hide(value) 
    console.log(value);
  

  ngOnInit()