angular组件封装

bigfatDone

于 2019-06-20 09:40:40 发布

阅读量2.6k

点赞数

分类专栏： angular 文章标签： angular 组件封装

本文链接：https://blog.csdn.net/bigfatDone/article/details/92967997

版权

angular 专栏收录该内容

0 篇文章

订阅专栏

本文介绍了如何在Angular中进行组件封装，从创建公共组件到在实际项目中使用，包括编写c-dropdown.component.ts、c-dropdown.component.html及c-dropdown.module.ts等文件，并在页面中引入和解决在父级路由中引入组件时遇到的问题，最终实现组件封装的成功应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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.在需要的页面中引入封装组件。