RELATEED CONSULTING
相关咨询
选择下列产品马上在线沟通
服务时间：8:30-17:00
你可能遇到了下面的问题
关闭右侧工具栏

新闻中心

这里有您想知道的互联网营销解决方案
            调用子组件的方法   

@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}}

  
@Component({
  selector: 'app-brother',
  templateUrl: './brother.component.html',
  styleUrls: ['./brother.component.css']
})
export class BrotherComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {
  }

}

  第二种：没有父子关系的组件间通讯
  
    
    
  

使用 localStorage 进行交互

@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}));
  }

}

   LocalChild1 组件
  
     写入数据
  

@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);
  }

}

  LocalChild2 组件
  
    读取数据
  

@Component({
  selector: 'app-local-storage',
  templateUrl: './local-storage.component.html',
  styleUrls: ['./local-storage.component.css']
})
export class LocalStorageComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {
  }

}

  第三种方案：利用 localStorge 通讯
  
    
    
  

最后，关于使用 Session、路由参数实现数据交互的方式，这里就不演示了。

以上是“Angular中组件间通讯的实现方法”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注创新互联行业资讯频道！


本文标题：Angular中组件间通讯的实现方法
网站链接：http://jxjierui.cn/article/pghogc.html

其他资讯

Top