각도 컴포넌트 통신 분석
- 不言원래의
- 2018-07-14 09:27:161329검색
이 기사에서는 특정 참조 가치가 있는 각도 구성 요소 통신에 대한 분석을 주로 소개합니다. 이제 모든 사람과 공유합니다. 필요한 친구가 참조할 수 있습니다.
이 기사에는 주로 다음과 같은 유형의 단일 페이지 응용 프로그램 구성 요소 통신이 있습니다. Angular 통신에 대해 이야기해 보세요
상위 구성 요소 => 하위 구성 요소
하위 구성 요소 => 상위 구성 요소
-
구성 요소 A = >
상위 구성요소= > ; 하위 구성 요소
|
| 지역 변수||
|
|
||
| service | service |
Rxjs용 Observalbe |
| Rxjs용 Observalbe |
localStorage,sessionStorage |
|
|
위 차트는 사용할 수 있는 통신 솔루션을 요약한 것입니다. Rxjs는 redux와 promise를 포함하여 가장 강력한 사용법입니다. 기능적 상태 관리, 하나씩 이야기해 볼까요 부모 컴포넌트 => 자식 컴포넌트@input, 가장 일반적으로 사용되는 방법@Component({
selector: 'app-parent',
template: '<p>childText:<app-child></app-child></p>',
styleUrls: ['./parent.component.css']
})
export class ParentComponent implements OnInit {
varString: string;
constructor() { }
ngOnInit() {
this.varString = '从父组件传过来的' ;
}
}
import { Component, OnInit, Input } from '@angular/core';
@Component({
selector: 'app-child',
template: '<h1>{{textContent}}</h1>',
styleUrls: ['./child.component.css']
})
export class ChildComponent implements OnInit {
@Input() public textContent: string ;
constructor() { }
ngOnInit() {
}
}
settersetter는 @input 속성을 가로채는 것입니다. 왜냐하면 우리가 통신할 때 컴포넌트의 경우, 입력 속성을 처리해야 하는 경우가 많으며, 이는 Setter와 Getter가 함께 사용되는 경우가 많습니다. 위의 child.comComponent.ts import { Component, OnInit, Input } from '@angular/core';
@Component({
selector: 'app-child',
template: '<h1>{{textContent}}</h1>',
styleUrls: ['./child.component.css']
})
export class ChildComponent implements OnInit {
_textContent:string;
@Input()
set textContent(text: string){
this._textContent = !text: "啥都没有给我" ? text ;
} ;
get textContent(){
return this._textContent;
}
constructor() { }
ngOnInit() {
}
}
onChange를 약간 수정하면 이는 각도를 통해 감지됩니다. 라이프 사이클 후크를 사용하는 것은 권장되지 않습니다. 사용하려면 각도 문서를 참조하세요. @ViewChild()@ViewChild()는 일반적으로 하위 구성 요소의 비공개 메서드를 호출하는 데 사용됩니다. import {Component, OnInit, ViewChild} from '@angular/core';
import {ViewChildChildComponent} from "../view-child-child/view-child-child.component";
@Component({
selector: 'app-parent',
templateUrl: './parent.component.html',
styleUrls: ['./parent.component.css']
})
export class ParentComponent implements OnInit {
varString: string;
@ViewChild(ViewChildChildComponent)
viewChildChildComponent: ViewChildChildComponent;
constructor() { }
ngOnInit() {
this.varString = '从父组件传过来的' ;
}
clickEvent(clickEvent: any) {
console.log(clickEvent);
this.viewChildChildComponent.myName(clickEvent.value);
}
}
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-view-child-child',
templateUrl: './view-child-child.component.html',
styleUrls: ['./view-child-child.component.css']
})
export class ViewChildChildComponent implements OnInit {
constructor() { }
name: string;
myName(name: string) {
console.log(name);
this.name = name ;
}
ngOnInit() {
}
}
로컬 변수 로컬 변수는 viewChild와 유사합니다. HTML 템플릿에서만 사용할 수 있습니다. parent.comComponent.html을 수정하고 <p> <input> <button>局部变量传值</button> <app-view-child-child></app-view-child-child> </p> child 组件如下 @Component({
selector: 'app-view-child-child',
templateUrl: './view-child-child.component.html',
styleUrls: ['./view-child-child.component.css']
})
export class ViewChildChildComponent implements OnInit {
constructor() { }
name: string;
myName(name: string) {
console.log(name);
this.name = name ;
}
ngOnInit() {
}
}
子组件 => 父组件@output()output这种常见的通信,本质是给子组件传入一个 parent.component.ts
@Component({
selector: 'app-child-to-parent',
templateUrl: './parent.component.html',
styleUrls: ['./parent.component.css']
})
export class ChildToParentComponent implements OnInit {
childName: string;
childNameForInject: string;
constructor( ) { }
ngOnInit() {
}
showChildName(name: string) {
this.childName = name;
}
} 하위 구성 요소는 다음과 같습니다
<p>
</p><p>output方式 childText:{{childName}}</p>
<br>
<app-output-child></app-output-child>
Child 구성 요소=> 상위 구성 요소@output()출력, 이 일반적인 통신은 본질적으로 함수를 전달하는 것입니다. code>를 하위 컴포넌트에 추가하고 하위 컴포넌트에서 실행합니다. 특정 메서드를 완료한 후 전달된 콜백 함수를 실행하고 그 값을 상위 컴포넌트에 전달합니다
parent.comComponent.html |
위 내용은 각도 컴포넌트 통신 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!