Angular 组件通信的三种方式
2024-08-23 08:26:27
我们可以通过以下三种方式来实现：
- 传递一个组件的引用给另一个组件
- 通过子组件发送EventEmitter和父组件通信
- 通过serive通信
1. 传递一个组件的引用给另一个组件
模板引用变量通常用来引用模板中的某个 DOM 元素，它还可以引用 Angular 组件或指令或Web Component。
使用井号 (#) 来声明引用变量。 #phone 的意思就是声明一个名叫 phone 的变量来引用 元素
这种方式适合组件间有依赖关系。 app component
<app-side-bar-toggle [sideBar]="sideBar"></app-side-bar-toggle>
<app-side-bar #sideBar></app-side-bar>
@Component({
selector: 'app-side-bar-toggle',
templateUrl: './side-bar-toggle.component.html',
styleUrls: ['./side-bar-toggle.component.css']
})
export class SideBarToggleComponent {
@Input() sideBar: SideBarComponent;
@HostListener('click')
click() {
this.sideBar.toggle();
}
}
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent {
sideBarIsOpened = false;
toggleSideBar(shouldOpen: boolean) {
this.sideBarIsOpened = !this.sideBarIsOpened;
}
}
2. 通过子组件发送EventEmitter和父组件通信
Demo2 这种方式利用事件传播，需要在子组件中写 app.component.html
<app-side-bar-toggle (toggle)="toggleSideBar()"></app-side-bar-toggle>
<app-side-bar [isOpen]="sideBarIsOpened"></app-side-bar>
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent {
sideBarIsOpened = false;
toggleSideBar(shouldOpen: boolean) {
this.sideBarIsOpened = !this.sideBarIsOpened;
}
}
@Component({
selector: 'app-side-bar-toggle',
templateUrl: './side-bar-toggle.component.html',
styleUrls: ['./side-bar-toggle.component.css']
})
export class SideBarToggleComponent {
@Output() toggle: EventEmitter<null> = new EventEmitter();
@HostListener('click')
click() {
this.toggle.emit();
}
}
@Component({
selector: 'app-side-bar',
templateUrl: './side-bar.component.html',
styleUrls: ['./side-bar.component.css']
})
export class SideBarComponent {
@HostBinding('class.is-open') @Input()
isOpen = false;
}
3. 通过service进行通信
Demo3 这里需要新建side-bar.service，我们把toggle方法写到service文件中， 然后将service注入到side-bar-toggle.component和side-bar-toggle.component，前者调用toggle方法，发送事件流，后者订阅事件
<app-side-bar-toggle></app-side-bar-toggle>
<app-side-bar></app-side-bar>
@Component({
selector: 'app-side-bar-toggle',
templateUrl: './side-bar-toggle.component.html',
styleUrls: ['./side-bar-toggle.component.css']
})
export class SideBarToggleComponent {
constructor(
private sideBarService: SideBarService
) { }
@HostListener('click')
click() {
this.sideBarService.toggle();
}
}
@Component({
selector: 'app-side-bar',
templateUrl: './side-bar.component.html',
styleUrls: ['./side-bar.component.css']
})
export class SideBarComponent {
@HostBinding('class.is-open')
isOpen = false;
constructor(
private sideBarService: SideBarService
) { }
ngOnInit() {
this.sideBarService.change.subscribe(isOpen => {
this.isOpen = isOpen;
});
}
}
@Injectable()
export class SideBarService { isOpen = false; @Output() change: EventEmitter<boolean> = new EventEmitter(); toggle() {
this.isOpen = !this.isOpen;
this.change.emit(this.isOpen);
}
}
最新文章
- iis 7.5 0x80004005 静态文件 html、js、css 500错误
- 《高性能MySql》阅读笔记
- Construct a tree from Inorder and Level order traversals
- javascript中字符串格式json如何转化成json对象
- HDU 4118 Holiday's Accommodation
- 原生javascript-常用的函数
- ubuntu 基本操作（1）
- Java语言基础（一） 标识符
- 登录MD5加盐处理
- javascript中的基本数据类型
- UBUNTU 下设置全局 path变量
- UWP开发小记
- Candy Bags
- Hibernate第十一篇【配置C3P0数据库连接池、线程Session】
- 【转载】CSS3 Transitions, Transforms和Animation使用简介与应用展示
- Spring Boot 注解详解
- 关于对ProgressBar定义模板的一些总结
- bzoj1477: 青蛙的约会（exgcd）
- luogu P4082 [USACO17DEC]Push a Box
- 正则表达式在JS中的使用