Angular 구성 요소는 어떻게 서로 상호 작용합니까? 일반적인 상호작용 방법 소개-JS 튜토리얼-php.cn

구성 요소 간의 상호 작용은 주로 마스터 구성 요소와 슬레이브 구성 요소 사이에서 이루어집니다. 그렇다면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

 child works!
 {{hero?.name}} says:
 I, {{hero?.name}}, am at your service, {{masterName}}.

로그인 후 복사

parent.comComponent.html

export class ParentComponent implements OnInit { hero = {name: 'qxj'} master = 'Master' constructor() { } ngOnInit(): void { } }

로그인 후 복사

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

child.comComponent.ts

로그인 후 복사

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

export class ChildComponent implements OnInit { @Input() name: string; @Output() voted = new EventEmitter(); didVote = false; vote(agreed: boolean) { this.voted.emit(agreed); this.didVote = true; } constructor() { } ngOnInit(): void { } }

로그인 후 복사

parent.comComponent.ts

{{name}}

로그인 후 복사

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상위 구성 요소와 하위 구성 요소는

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

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

4. 상위 구성 요소는

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

       child.component.ts
       
        Should mankind colonize the Universe?
 Agree: {{agreed}}, Disagree: {{disagreed}}
 
        
         로그인 후 복사
        
       
       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
       
        {{message}}
        
         로그인 후 복사
        
       
       parent.component.html
       
        export class ParentComponent implements OnInit { constructor() { } ngOnInit(): void { } }
        
         로그인 후 복사
        
       
       
       4、父组件调用@ViewChild()
       를 호출합니다.로컬 변수방법은 간단하고 편리한 방법입니다. 그러나 부모 구성 요소-하위 구성 요소 연결은 모두 부모 구성 요소의 템플릿에서 이루어져야 하기 때문에 제한 사항도 있습니다. 상위 구성 요소 자체의 코드는 하위 구성 요소에 액세스할 수 없습니다.
       상위 구성 요소의class가 하위 구성 요소의 속성 값을 읽거나 하위 구성 요소의 메서드를 호출해야 하는 경우로컬 변수메서드를 사용할 수 없습니다.
       상위 구성 요소class에 이 액세스가 필요한 경우 하위 구성 요소를ViewChild로 사용하고 상위 구성 요소에 ***주입***할 수 있습니다.
       countdown-parent.comComponent.ts
       
        Countdown to Liftoff (via local variable)
   {{child.seconds}}
 
        
         로그인 후 복사
        
       
       더 많은 프로그래밍 관련 지식을 보려면프로그래밍 소개를 방문하세요! !
       
       위 내용은 Angular 구성 요소는 어떻게 서로 상호 작용합니까? 일반적인 상호작용 방법 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!