angular8 封装组件

 

组件封装的意义和方法

  需要重用，或者简化逻辑

ng generate component组件名  （驼峰模式）

使用index.ts方便导入以及隔离内部变化对外部的影响

ng g c 组件名（驼峰模式）

如果想在某个文件夹下新建组件   ng g c 文件名/组件名（驼峰模式）

在每一个文件夹下新建一个index.ts   引用 

每一个组件里 export * from './scrollable-tab.component';

大组件文件夹下   export * from './scrollable-tab'

组的输入输出件

父组件 ->  子组件  @input  属性绑定

子组件 -> 父组件  @output   事件绑定

1.父组件引用子组件  父组件数据传到子组件

父组件

app.component.html

<app-scrollable-tab [menu]="menus"></app-scrollable-tab>

<app-scrollable-tab [menu]="menus1"></app-scrollable-tab>

app.component.ts 

import { Component } from '@angular/core';
import { TopMenu } from