Angular组件如何进行通信
小编给大家分享一下Angular组件如何进行通信,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!
网站建设哪家好,找创新互联建站!专注于网页设计、网站建设、微信开发、成都小程序开发、集团企业网站建设等服务项目。为回馈新老客户创新互联还提供了扶风免费建站欢迎大家使用!
准备一下我们的环境:
1、创建一个header
组件: ng g c components/header
export class HeaderComponent implements OnInit { constructor() {} ngOnInit(): void {} }
2、创建一个title
组件: ng g c components/title
{{title}}
export class TitleComponent implements OnInit { public title: string = '标题'; constructor() {} ngOnInit(): void {} }
3、创建一个button
组件: ng g c components/button
export class ButtonComponent implements OnInit { public btnName: string = '按钮'; constructor() {} ngOnInit(): void {} }
直接调用
适用于父子关系组件,注意点是直接调用使得父子组件的耦合性变高,要明确使用确实需要直接调用。
1、将我们的header组件挂载到app中,使得app和header之间形成父子组件关系
2、使用#
为我们的组件起一个名称:
3、现在我们的header组件还很空,我们扩展一下,要不然调用什么呢?
export class HeaderComponent implements OnInit { public name: string = 'HeaderComponent'; printName(): void { console.log('component name is', this.name); } }
4、组件扩展好以后我们就可以在父组件app中调用子组件header中的属性和函数了
调用子组件属性: {{ header.name }}
5、第4步是在父组件的html模板中进行操作,有时候我们还需要在父组件的ts类中对子组件进行操作,我们接下来接着演示。
6、我们需要用到一个新的装饰器@ViewChild(Component)
export class AppComponent { title = 'angular-course'; @ViewChild(HeaderComponent) private header!: HeaderComponent; // 声明周期钩子: 组件及子组件视图更新后调用,执行一次 ngAfterViewInit(): void { // 调用子组件属性 console.log(this.header.name); // 调用子组件函数 this.header.printName(); } }
@Input和@Output
适用于父子关系组件
1、我们通过在header
组件中定义title
,来解耦title
组件中直接调用导致扩展复杂的问题
2、为title
组件中的title
属性增加@Input()装饰器: @Input() public title: string = '标题';
3、为header组件新增title属性并赋值: public title: string = '我是新标题';
4、我们再header
组件的html
模板中这样来使用title
组件:
5、一起看看到现在的效果吧,界面虽然丑,但是下次使用组件时title
设置是不是方便一点呢?
6、以上步骤实现了父组件的数据传递到了子组件中,那么我们接着来看子组件的数据怎么传递到父组件中呢? 我们一起来用@Output()
装饰器实现以下吧
7、在title
组件的ts类中增加titleChange
属性: @Output() public titleChange = new EventEmitter();
8、在title
组件的ts类中定时派发数据
ngOnInit(): void { // 定时将子组件的数据进行派发 setInterval(() => { this.titleChange.emit(this.title); }, 1500); }
9、现在我们来修改header父组件来接收派发来的数据:
onChildTitleChange(value: any) { console.log('onChildTitleChange: >>', value); }
利用服务单利进行通信
适用于无直接关系组件
1、既然要通过服务来做通信,那我们就先创建一个服务吧: ng g s services/EventBus
,并且我们声明了一个类型为Subject
的属性来辅助通信
@Injectable({ providedIn: 'root', }) export class EventBusService { public eventBus: Subject= new Subject(); constructor() {} }
2、我们为了省事就不重新创建组件了,因为我们的header
中的按钮组件和title组件就符合没有直接关系的组件。
3、改造一下我们的button
组件,并且添加点击事件来触发triggerEventBus
函数
export class ButtonComponent implements OnInit { public btnName: string = '按钮'; constructor(public eventBusService: EventBusService) {} ngOnInit(): void {} public triggerEventBus(): void { this.eventBusService.eventBus.next('我是按钮组件'); } }
4、在title
组件中模拟数据的获取
export class TitleComponent implements OnInit { constructor(public eventBusService: EventBusService) {} ngOnInit(): void { this.eventBusService.eventBus.subscribe((value) => { console.log(value); }); } }
利用cookie、session或者localstorage进行通信
1、这个就很简单了,我们还是用title
组件和button
组件来做演示,这次我们在title组件中将数据保存,在button
组件中获取数据。我们仅演示localstorage
吧,其他都雷同的。
2、在title
组件的ngOnInit()
钩子中保存title
到localstorage
中: window.localStorage.setItem('title', this.title);
3、在button组件中获取数据: const title = window.localStorage.getItem('title');
以上是“Angular组件如何进行通信”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联行业资讯频道!
本文名称:Angular组件如何进行通信
网页网址:http://scyanting.com/article/igejpo.html