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

rrreee2. 제목 구성 요소 만들기: ng g c 구성 요소/제목

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

직접 호출

🎜🎜은 상위-하위 관계 구성 요소에 적합합니다. 직접 호출하면 상위-하위 구성 요소의 결합이 높아집니다. 명확하게 사용하십시오. 직접 호출해야 합니다. 🎜🎜🎜1. 앱과 헤더 사이에 상위-하위 구성 요소 관계가 형성되도록 헤더 구성 요소를 앱에 마운트합니다. 🎜🎜2. 구성 요소에 이름을 지정하려면 #를 사용하세요. code> 🎜🎜3. 이제 헤더 구성요소가 여전히 매우 비어 있습니다. 그렇지 않으면 무엇을 호출해야 할까요? 앞으로는 상위 구성 요소 앱의 하위 구성 요소 헤더에 있는 속성과 기능을 호출할 수 있습니다🎜rrreee🎜5. 네 번째 단계는 상위 구성 요소의 HTML 템플릿에서 작동하는 것입니다. 하위 구성 요소를 작동하려면 다음에 설명하겠습니다. 🎜🎜6. 부모-자식 관계 구성 요소에 적용 가능한 새로운 데코레이터 @ViewChild(Component)🎜rrreee🎜🎜🎜@Input 및 @Output🎜🎜🎜🎜🎜을 사용해야 합니다🎜🎜🎜1. title 구성 요소🎜🎜2에서 직접 호출로 인해 발생하는 복잡한 확장 문제를 분리하기 위해 header 구성 요소에 title을 정의합니다. >title 구성 요소의 title 속성에 @Input() 데코레이터를 추가합니다. @Input() public title: string = 'title';🎜🎜 3. 헤더 구성 요소에 제목 속성을 추가하고 값을 할당합니다. public title: string = 'I am the new title';🎜🎜4. header 구성 요소 /code>다음과 같이 템플릿에서 title 구성 요소를 사용합니다. <app-title>-title></app-title>🎜🎜5. 지금까지의 효과를 살펴보겠습니다. 인터페이스는 보기 흉하지만, 다음번에 컴포넌트를 사용할 때 제목을 설정하는 것이 더 편리할까요? 🎜🎜🎜🎜6. 위 단계에서는 상위 컴포넌트의 데이터가 하위 컴포넌트로 전달된다는 것을 인식합니다. 그러면 어떻게 되는지 살펴보겠습니다. 하위 구성 요소의 데이터가 상위 구성 요소에 전달됩니까? 를 함께 사용하겠습니다. @Output() 데코레이터는 다음 🎜🎜7을 구현합니다. ts에 titleChange 속성을 ​​추가합니다. title 구성 요소의 클래스: @Output() public titleChange = new EventEmitter();🎜🎜8. title 컴포넌트🎜rrreee🎜9 이제 발송된 데이터를 수신하기 위해 헤더 상위 컴포넌트를 수정해 보겠습니다. img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp /f10d55753d564717a5187ba6f39dd67d~tplv-k3u1fbpfcp-zoom-in-crop-mark:652:0:0:0.awebp" alt= "Angular 구성요소는 어떻게 통신합니까? 상위-하위 구성요소 통신을 위한 2가지 방법" loading="lazy" class="medium-zoom-image"/>🎜🎜 1. 서비스를 통해 통신하고 싶으므로 먼저 서비스를 만들어 보겠습니다. <code>ng g s services/EventBus, 그리고 Subject Auxiliary communications🎜rrreee🎜2 유형의 속성을 선언합니다. 헤더에 버튼 구성 요소와 제목 구성 요소가 있으므로 문제를 피하기 위해 구성 요소를 다시 만들지 않습니다. code>는 직접적인 관련이 없는 구성 요소입니다. 🎜🎜3. <code>button 구성 요소를 변환하고 triggerEventBus 함수를 트리거하는 클릭 이벤트를 추가하세요🎜rrreee🎜4. title 구성 요소에서 시뮬레이션하세요. 데이터 수집🎜rrreee🎜🎜🎜쿠키, 세션 또는 로컬 저장소를 사용하여 통신🎜🎜🎜🎜🎜🎜

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');

2. title 구성 요소의 ngOnInit() 후크에 있는 localstorage에 title을 저장합니다. window.localStorage.setItem('title', this.title);

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

결론:

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

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

저자: Xiaoxin

더 많은 프로그래밍 관련 지식을 보려면 🎜프로그래밍 입문🎜을 방문하세요! ! 🎜

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