angular組件封裝

1.這個公共組件的封裝

2.c-dropdown.component.ts

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

@Component({
  selector: 'c-dropdown',
  templateUrl: './c-dropdown.component.html',
  styleUrls: ['./c-dropdown.component.scss']
})
export class CDropdownComponent implements OnInit {
  ngOnInit() {
    // this.totalPage = Math.ceil(this.total / this.pageSize);
  }
}

3.c-dropdown.component.html

<div>
  <h3>this is the component</h3>
</div>

4.c-dropdown.component.scss（空）

5.c-dropdown.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';

import { CDropdownComponent } from './c-dropdown.component';


@NgModule({
  imports: [
    CommonModule,
    FormsModule,
  ],
  declarations: [
    CDropdownComponent
  ],
  exports: [
    CDropdownComponent
  ]
})
export class CDropdownModule { }

6.在需要的頁面中引入封裝組件。

7.在頁面中引入封裝的組件

8.報錯，說沒有c-dropdown這個元素。因爲這個頁面是父級的子頁面，所以還要在其父級的路由中引入改封裝的組件。

9封裝組件成功。

.