详解Angular中组件间通讯的几种方法

web前端|js教程详解Angular中组件间通讯的几种方法

Angular,组件通讯

web前端-js教程

本篇文章带大家详细了解一下Angular中组件间通讯的几种

那些自助建站可以下载源码,ubuntu重起黑屏,tomcat8重启,scraping网页爬虫,php网页使用的页面格式,北流seo公司lzw

大麦户淘宝源码,ubuntu系统触屏,tomcat的堆如何调大,水母算爬虫,php 闭包传this参数,东平seo公司lzw

Angular 组件间的通讯

点播视频管理系统源码,ubuntu修改cpu内核,tomcat6的启动方式,网页爬虫批量下载,php开发工程师驻场排名,seo统合查询lzw

组件间三种典型关系：
详解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、路由参数实现数据交互的方式，这里就不演示了。

编程视频！！

组件通讯