How do Angular components communicate? 2 methods for parent-child component communication

This article will take you to understand the component communication in Angular, and introduce the methods of communication between parent and child components, and communication between components that have no direct relationship.

In actual applications, our components will be related in a tree structure, so the relationship between components is mainly:

• Father-son relationship

• Brother relationship

• No direct relationship

【 Related tutorial recommendations: "angular tutorial"】

Prepare our environment:

1. Create a headerComponents: ng g c components/header

<app-button></app-button>
<app-title></app-title>
<app-button></app-button>

export class HeaderComponent implements OnInit {

  constructor() {}

  ngOnInit(): void {}
}

2. Create a title component: ng g c components/title

<span>{{title}}</span>

export class TitleComponent implements OnInit {

  public title: string = '标题';

  constructor() {}

  ngOnInit(): void {}
}

3. Create a button component: ng g c components/button

<button>{{ btnName }}</button>

export class ButtonComponent implements OnInit {
  public btnName: string = '按钮';

  constructor() {}

  ngOnInit(): void {}
}

Directly call

Applies to parent-child relationship components. Note that direct calls make the coupling of parent-child components higher. To make it clear, direct calls are required.

1. Mount our header component into the app so that a parent-child component relationship is formed between the app and the header.

2. Use # for us Give the component a name: <app-header #header></app-header>

3. Now our header component is still very empty, let’s expand it, otherwise What to call?

export class HeaderComponent implements OnInit {
  public name: string = 'HeaderComponent';

  printName(): void {
    console.log('component name is', this.name);
  }
}

4. After the component is expanded, we can call the properties and functions in the sub-component header in the parent component app

<app-header #header></app-header>
<p>
  调用子组件属性: {{ header.name }}
  <button (click)="header.printName()">调用子组件函数</button>
</p>

5. The fourth step is to The operation is performed in the html template of the component. Sometimes we also need to operate the sub-component in the ts class of the parent component. We will demonstrate next.

6. We need to use a new decorator@ViewChild(Component)

export class AppComponent {
  title = 'angular-course';

  @ViewChild(HeaderComponent)
  private header!: HeaderComponent;

    // 声明周期钩子: 组件及子组件视图更新后调用,执行一次
  ngAfterViewInit(): void {
    // 调用子组件属性
    console.log(this.header.name);
    // 调用子组件函数
    this.header.printName();
  }
}

@Input and @Output

Applicable to parent-child relationship components

1. We solve this problem by defining title in the header component. Direct calls in the coupled title component lead to complex expansion problems

2. Add @Input() decoration to the title attribute in the title component Container: @Input() public title: string = 'Title';

3. Add a title attribute to the header component and assign a value: public title: string = 'I am New title';

4. We use the title component in the html template of the header component like this: <app-title [title]="title"></app-title>

5. Let’s take a look at the effect so far. Although the interface is ugly, I will use the component next time Is it more convenient to set title?

6. The above steps realize that the data of the parent component is passed to the child component, then let’s continue Let’s see how the data of the child component is passed to the parent component? Let’s use the @Output() decorator to implement the following

7. In the title component Add the titleChange attribute to the ts class: @Output() public titleChange = new EventEmitter();

8. In the ts of the title component Regularly dispatch data in the class

ngOnInit(): void {
  // 定时将子组件的数据进行派发
  setInterval(() => {
    this.titleChange.emit(this.title);
    }, 1500);
}

9. Now let’s modify the header parent component to receive the dispatched data:

<app-title
    [title]="title"
  (titleChange)="onChildTitleChange($event)">
</app-title>

onChildTitleChange(value: any) {
    console.log('onChildTitleChange: >>', value);
}

Use service simple interest for communication

Applicable to components that have no direct relationship

1. Since we need to communicate through services, we first Create a service: ng g s services/EventBus, and we declare an attribute of type Subject to assist communication

@Injectable({
  providedIn: 'root',
})
export class EventBusService {
  public eventBus: Subject<any> = new Subject();

  constructor() {}
}

2. To save trouble, we will not The components have been re-created, because the button component and title component in our header are components that have no direct relationship.

3. Transform our button component and add a click event to trigger the triggerEventBus function

export class ButtonComponent implements OnInit {
  public btnName: string = '按钮';

  constructor(public eventBusService: EventBusService) {}

  ngOnInit(): void {}

  public triggerEventBus(): void {
    this.eventBusService.eventBus.next('我是按钮组件');
  }
}

4. In titleAcquisition of simulated data in components

export class TitleComponent implements OnInit {

  constructor(public eventBusService: EventBusService) {}

  ngOnInit(): void {
    this.eventBusService.eventBus.subscribe((value) => {
      console.log(value);
    });
  }
}

Use cookie, session or localstorage to communicate

1. This is very simple. We still use the title component and the button component for demonstration. This time we save the data in the title component. In Get data from the button component. Let’s only demonstrate localstorage, everything else is the same.

2. Save title in the ngOnInit() hook of the title component to localstorage: window.localStorage.setItem('title', this.title);

3. Get data in the button component: const title = window.localStorage.getItem('title');

Conclusion:

In this article we have introduced Angular’s ​​component communication, so that our split components can perform reasonable Communication provides guarantee, and the use of components until now is done by introducing tags.

Original address: https://juejin.cn/post/6991471300837572638

Author: Xiaoxin

For more programming-related knowledge, please Visit: Introduction to Programming! !

The above is the detailed content of How do Angular components communicate? 2 methods for parent-child component communication. For more information, please follow other related articles on the PHP Chinese website!