组件封装的意义:
需要重用或者简化逻辑。
命令行创建指令:
ng generate/g component/c components/componentName.
ps: 可以手动加入index.ts进一步方便导入组件,以及隔离内部变化对外部的影响。
目录结构如下:
-> components
index.ts
index.ts代码:
export * from './child'
->child
index.ts
index.ts代码:
export * from './child.component';
child.component.html
child.component.less
child.component.spec.ts
child.component.ts
父子组件传值:
父向子组件传值:
父组件代码:
app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.less']
})
export class AppComponent {
//父组件定义userName将传值给子组件
userName: string = 'zs';
}
app.component.html
<div>
<!-- 在引用子组件标签中以属性绑定方式将userName传递给子组件 -->
<!-- 当传递一个字符串时写法: user='zs' -->
<app-child user="zs"></app-child>
<app-child [user]="userName"></app-child>
</div>
子组件接收代码:
child.component.ts
// 在子组件里面引入Input,然后执行@Input装饰器将变量接收
import { Component, OnInit, Input } from '@angular/core';
@Component({
selector: 'app-child',
templateUrl: './child.component.html',
styleUrls: ['./child.component.less']
})
export class ChildComponent implements OnInit {
@Input() user;
constructor() { }
ngOnInit() {
}
}
子向父组件传值:
子组件代码:
child.component.ts
// 引入Output,EvnentEmitter模块,通过装饰器@Output实例化EventEmitter
import { Component, OnInit, Output, EventEmitter} from '@angular/core';
@Component({
selector: 'app-child',
templateUrl: './child.component.html',
styleUrls: ['./child.component.less']
})
export class ChildComponent implements OnInit {
userName: string = 'zs';
// 实例化 EventEmitter
@Output() childEvent = new EventEmitter();
constructor() { }
ngOnInit() {
}
handleEvent() {
向子组件通过EventEmitter实例的emit方法以参数的形式映射出userName
this.childEvent.emit(this.userName)
}
}
child.component.html
<!-- 在子组件中触发映射事件handleEvent,向父组件传值 -->
<p (click)='handleEvent()'>child works!</p>
父组件代码:
app.component.html
<div>
<!-- 父组件中以事件绑定的形式绑定子组件中 EventEmitter的实例,触发getChildEvent方法,通过传参接收子组件传递的数据 -->
<app-child (childEvent)="getChildEvent($event)"></app-child>
</div>
app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.less']
})
export class AppComponent {
getChildEvent(userName) {
// 打印子组件传递的数据
console.log(userName);
}
}