Angular 구성요소는 어떻게 통신합니까? 상위-하위 구성요소 통신을 위한 2가지 방법

이 글에서는 Angular의 컴포넌트 통신을 이해하고 상위 컴포넌트와 하위 컴포넌트 간의 통신 방법, 직접적인 관계가 없는 컴포넌트 간의 통신 방법을 소개합니다.

실제 애플리케이션에서 구성 요소는 트리 구조로 연결되므로 구성 요소 간의 관계는 주로 다음과 같습니다.

• 아버지-자식 관계

• 형제 관계

• 없음 직접 관련

[관련 튜토리얼 권장 사항: "angular tutorial"]

환경 준비:

1 header 구성 요소 만들기: ng g c Components/header<code>header组件: 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、创建一个title组件: ng g c components/title

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

export class TitleComponent implements OnInit {

  public title: string = '标题';

  constructor() {}

  ngOnInit(): void {}
}

3、创建一个button组件: ng g c components/button

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

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

  constructor() {}

  ngOnInit(): void {}
}

直接调用

适用于父子关系组件,注意点是直接调用使得父子组件的耦合性变高,要明确使用确实需要直接调用。

1、将我们的header组件挂载到app中,使得app和header之间形成父子组件关系

2、使用#为我们的组件起一个名称: <app-header #header></app-header>

3、现在我们的header组件还很空,我们扩展一下,要不然调用什么呢?

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

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

4、组件扩展好以后我们就可以在父组件app中调用子组件header中的属性和函数了

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

5、第4步是在父组件的html模板中进行操作,有时候我们还需要在父组件的ts类中对子组件进行操作,我们接下来接着演示。

6、我们需要用到一个新的装饰器@ViewChild(Component)

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

  @ViewChild(HeaderComponent)
  private header!: HeaderComponent;

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

@Input和@Output

适用于父子关系组件

1、我们通过在header组件中定义title,来解耦title组件中直接调用导致扩展复杂的问题

2、为title组件中的title属性增加@Input()装饰器: @Input() public title: string = '标题';

3、为header组件新增title属性并赋值: public title: string = '我是新标题';

4、我们再header组件的html模板中这样来使用title组件: <app-title [title]="title"></app-title>

5、一起看看到现在的效果吧,界面虽然丑,但是下次使用组件时title设置是不是方便一点呢?

6、以上步骤实现了父组件的数据传递到了子组件中,那么我们接着来看子组件的数据怎么传递到父组件中呢? 我们一起来用@Output()装饰器实现以下吧

7、在title组件的ts类中增加titleChange属性: @Output() public titleChange = new EventEmitter();

8、在title组件的ts类中定时派发数据

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

9、现在我们来修改header父组件来接收派发来的数据:

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

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

利用服务单利进行通信

适用于无直接关系组件

1、既然要通过服务来做通信,那我们就先创建一个服务吧: ng g s services/EventBus,并且我们声明了一个类型为Subject的属性来辅助通信

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

  constructor() {}
}

2、我们为了省事就不重新创建组件了,因为我们的header中的按钮组件和title组件就符合没有直接关系的组件。

3、改造一下我们的button组件,并且添加点击事件来触发triggerEventBus函数

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

  constructor(public eventBusService: EventBusService) {}

  ngOnInit(): void {}

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

4、在title

export class TitleComponent implements OnInit {

  constructor(public eventBusService: EventBusService) {}

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

rrreeerrreee3 버튼 구성 요소 만들기: ng g c 구성 요소/버튼rrreeerrreee

1. 여전히 title 구성 요소와 button 구성 요소를 사용하여 이번에는 제목 구성 요소와 에 데이터를 저장합니다. 버튼 구성 요소에서 데이터를 가져옵니다. localstorage만 보여드리겠습니다. 다른 모든 것은 동일합니다. title组件和button组件来做演示,这次我们在title组件中将数据保存,在button组件中获取数据。我们仅演示localstorage吧,其他都雷同的。

2、在title组件的ngOnInit()钩子中保存title到localstorage中: window.localStorage.setItem('title', this.title);

3、在button组件中获取数据: const title = window.localStorage.getItem('title');

3. 버튼 구성 요소에서 데이터 가져오기: const title = window.localStorage.getItem('title');

이 기사에서는 분할된 구성 요소가 합리적으로 통신할 수 있도록 보장하는 Angular의 구성 요소 통신을 소개했습니다. 지금까지는 태그 수행을 도입하여 구성 요소를 사용해 왔습니다.

원본 주소: https://juejin.cn/post/6991471300837572638

저자: Xiaoxin

위 내용은 Angular 구성요소는 어떻게 통신합니까? 상위-하위 구성요소 통신을 위한 2가지 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!