angular公共組件的寫法

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() {}
}