本篇文章带大家详细了解一下angular中组件间通讯的几种。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。
Angular 组件间的通讯
组件间三种典型关系：
父好组件之间的交互（@Input/@Output/模板变量/@ViewChild）
非父子组件之间的交互（Service/localStorage）
还可以可以利用 Session、 路由参数来进行通讯等
相关教程推荐：《angular教程》
父子组件之间交互
子组件编写
child.component.ts
@Component({ selector: 'app-child', templateUrl: './child.component.html', styleUrls: ['./child.component.css']})export class ChildComponent implements OnInit { private _childTitle = '我是子组件'; @Input() set childTitle(childTitle: string) { this._childTitle = childTitle; } get childTitle(): string { return this._childTitle; } @Output() messageEvent: EventEmitter = new EventEmitter(); constructor() { } ngOnInit(): void { } sendMessage(): void { this.messageEvent.emit('我是子组件'); } childFunction(): void { console.log('子组件的名字是：' + this.childTitle); }}
登录后复制child.component.html
{{childTitle}}
登录后复制
父组件
parent-and-child.component.ts
@Component({ selector: 'app-parent-and-child', templateUrl: './parent-and-child.component.html', styleUrls: ['./parent-and-child.component.css']})export class ParentAndChildComponent implements OnInit { constructor() { } ngOnInit(): void { } doSomething(event: any): void { alert(event); }}
登录后复制parent-and-child.component.html
父组件
登录后复制
@Input 属性绑定是单向的，父组件的属性变化会影响子组件的属性变化， 子组件的属性变化不会反过来影响父组件的的属性变化。
不过，可以利用 @Input() 和 @Output() 实现属性的双向绑定。
@Input()value: string;@Output()valueChange: EventEmitter = new EventEmitter();// 实现双向绑定
登录后复制
注意： 使用 [()] 进行双向绑定时，输出属性名必须是输入属性名与 Change 组成， 形如： xxxChange。
非父子组件之间交互
使用 Service 进行交互
event-bus.service.ts
/** * 用于充当事件总线 */@Injectable()export class EventBusService { evnetBus: Subject = new Subject(); constructor() { }}
登录后复制child1.component.ts
@Component({ selector: 'app-child1', templateUrl: './child1.component.html', styleUrls: ['./child1.component.css']})export class Child1Component implements OnInit { constructor(private eventBusService: EventBusService) { } ngOnInit(): void { } triggerEventBus(): void { this.eventBusService.evnetBus.next('child1 触发的事件'); }}
登录后复制child1.component.html
child1 组件
登录后复制child2.component.ts
@Component({ selector: 'app-child2', templateUrl: './child2.component.html', styleUrls: ['./child2.component.css']})export class Child2Component implements OnInit { events: Array = new Array(); constructor(private eventBusService: EventBusService) { } ngOnInit(): void { this.listenerEvent(); } listenerEvent(): void { this.eventBusService.evnetBus.subscribe( value => { this.events.push(value); }); }}
登录后复制child2.component.html
child2 组件{{event}}
登录后复制brother.component.ts
@Component({ selector: 'app-brother', templateUrl: './brother.component.html', styleUrls: ['./brother.component.css']})export class BrotherComponent implements OnInit { constructor() { } ngOnInit(): void { }}
登录后复制brother.component.html
第二种：没有父子关系的组件间通讯
登录后复制
使用 localStorage 进行交互
local-child1.component.ts
@Component({ selector: 'app-local-child1', templateUrl: './local-child1.component.html', styleUrls: ['./local-child1.component.css']})export class LocalChild1Component implements OnInit { constructor() { } ngOnInit(): void { } writeData(): void { window.localStorage.setItem('message', JSON.stringify({name: 'star', age: 22})); }}
登录后复制local-child1.component.html
LocalChild1 组件
登录后复制local-child2.component.ts
@Component({ selector: 'app-local-child2', templateUrl: './local-child2.component.html', styleUrls: ['./local-child2.component.css']})export class LocalChild2Component implements OnInit { constructor() { } ngOnInit(): void { } readData(): void { const dataStr = window.localStorage.getItem('message'); const data = JSON.parse(dataStr); console.log('name:' + data.name, 'age:' + data.age); }}
登录后复制local-child2.component.html
LocalChild2 组件
登录后复制local-storage.component.ts
@Component({ selector: 'app-local-storage', templateUrl: './local-storage.component.html', styleUrls: ['./local-storage.component.css']})export class LocalStorageComponent implements OnInit { constructor() { } ngOnInit(): void { }}
登录后复制local-storage.component.html
第三种方案：利用 localStorge 通讯
登录后复制
最后，关于使用 Session、路由参数实现数据交互的方式，这里就不演示了。
更多编程相关知识，请访问：编程视频！！
以上就是详解Angular中组件间通讯的几种方法的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2714131.html
