Angular 구성 요소는 어떻게 서로 상호 작용합니까? 일반적인 상호작용 방법 소개

구성 요소 간의 상호 작용은 주로 마스터 구성 요소와 슬레이브 구성 요소 사이에서 이루어집니다. 그렇다면 Angular 구성 요소는 어떻게 서로 상호 작용합니까? 다음 문서에서는 Angular 구성 요소 간의 일반적인 상호 작용 방법을 소개합니다.

【관련 튜토리얼 추천: "angular tutorial"】

1. 입력 바인딩을 통해 상위 컴포넌트에서 하위 컴포넌트로 데이터를 전달합니다. html

export class ChildComponent implements OnInit {
  @Input() hero: any;
  @Input('master') masterName: string;      // 第二个 @Input 为子组件的属性名 masterName 指定一个别名 master

  constructor() { }

  ngOnInit(): void {
  }

}

parent.comComponent.ts

<div style="background-color: #749f84">
  <p>child works!</p>
  <h3>{{hero?.name}} says:</h3>
  <p>I, {{hero?.name}}, am at your service, {{masterName}}.</p>
</div>

parent.comComponent.html

export class ParentComponent implements OnInit {
  hero = {name: 'qxj'}
  master = 'Master'

  constructor() {
  }

  ngOnInit(): void {
  }

}

2 상위 구성 요소는 하위 구성 요소

child.comComponent.ts

<app-child [hero]="hero" [master]="master"></app-child>

child.comComponent의 이벤트를 수신합니다. .html

export class ChildComponent implements OnInit {
  @Input()  name: string;
  @Output() voted = new EventEmitter<boolean>();
  didVote = false;

  vote(agreed: boolean) {
    this.voted.emit(agreed);
    this.didVote = true;
  }

  constructor() { }

  ngOnInit(): void {
  }

}

parent.comComponent.ts

<h4>{{name}}</h4>
<button (click)="vote(true)"  [disabled]="didVote">Agree</button>
<button (click)="vote(false)" [disabled]="didVote">Disagree</button>

parent.comComponent.html

export class ParentComponent implements OnInit {
  agreed = 0
  disagreed = 0
  voters = ['Narco', 'Celeritas', 'Bombasto']

  onVoted(agreed: boolean) {
    agreed ? this.agreed++ : this.disagreed++
  }

  constructor() {
  }

  ngOnInit(): void {
  }

}

3상위 구성 요소와 하위 구성 요소는

로컬 변수

를 통해 상호 작용합니다. 하위 구성 요소의 속성을 읽거나 하위 구성 요소의 메서드를 호출합니다. 그러나 다음 예제와 같이 상위 구성 요소 템플릿에 새 지역 변수를 만들어 하위 구성 요소를 표시한 다음 이 변수를 사용하여 하위 구성 요소의 속성을 읽고 하위 구성 요소의 메서드를 호출할 수 있습니다. 하위 구성 요소인 CountdownTimerComponent는 카운트다운을 하고 0에 도달하면 미사일을 발사합니다. start 및 stop 메소드는 시계를 제어하고 템플릿에 카운트다운 상태 정보를 표시하는 역할을 합니다. ㅋㅋㅋ /article/000/000/024/98620045d29481622e5d3c1e4fd03c09-1.gif" alt="countdown 타이머"/>

4. 상위 구성 요소는

<p>@ViewChild()<code>CountdownTimerComponent 进行倒计时，归零时发射一个导弹。start 和 stop 方法负责控制时钟并在模板里显示倒计时的状态信息。

child.component.ts

<h2>Should mankind colonize the Universe?</h2>
<h3>Agree: {{agreed}}, Disagree: {{disagreed}}</h3>
<app-child *ngFor="let voter of voters" [name]="voter" (voted)="onVoted($event)"></app-child>

child.component.html

export class ChildComponent implements OnInit, OnDestroy {
  intervalId = 0
  message = ''
  seconds = 11

  clearTimer() {
    clearInterval(this.intervalId)
  }

  ngOnInit() {
    this.start()
  }

  ngOnDestroy() {
    this.clearTimer()
  }

  start() {
    this.countDown()
  }

  stop() {
    this.clearTimer()
    this.message = `Holding at T-${this.seconds} seconds`
  }

  private countDown() {
    this.clearTimer()
    this.intervalId = window.setInterval(() => {
      this.seconds -= 1
      if (this.seconds === 0) {
        this.message = 'Blast off!'
      } else {
        if (this.seconds < 0) {
          this.seconds = 10
        } // reset
        this.message = `T-${this.seconds} seconds and counting`
      }
    }, 1000)
  }

}

parent.component.ts

<p>{{message}}</p>

parent.component.html

export class ParentComponent implements OnInit {
  constructor() {
  }
  ngOnInit(): void {
  }
}

4、父组件调用<span style="font-size: 16px;">@ViewChild()</span>

를 호출합니다. 로컬 변수 방법은 간단하고 편리한 방법입니다. 그러나 부모 구성 요소-하위 구성 요소 연결은 모두 부모 구성 요소의 템플릿에서 이루어져야 하기 때문에 제한 사항도 있습니다. 상위 구성 요소 자체의 코드는 하위 구성 요소에 액세스할 수 없습니다.

상위 구성 요소의 class가 하위 구성 요소의 속성 값을 읽거나 하위 구성 요소의 메서드를 호출해야 하는 경우 로컬 변수 메서드를 사용할 수 없습니다.

상위 구성 요소 class에 이 액세스가 필요한 경우 하위 구성 요소를 ViewChild로 사용하고 상위 구성 요소에 ***주입***할 수 있습니다.

countdown-parent.comComponent.ts

<h3>Countdown to Liftoff (via local variable)</h3>
<button (click)="child.start()">Start</button>
<button (click)="child.stop()">Stop</button>
<div class="seconds">{{child.seconds}}</div>
<app-child #child></app-child>

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

위 내용은 Angular 구성 요소는 어떻게 서로 상호 작용합니까? 일반적인 상호작용 방법 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!