Angular 구성 요소의 대화형 사용에 대한 자세한 설명

이번에는 Angular 컴포넌트의 인터랙티브 사용에 대한 자세한 설명을 가져왔습니다. Angular 컴포넌트 인터랙션에 대한 주의사항은 무엇인가요? 실제 사례를 살펴보겠습니다.

데이터 전송 방향에 따라 상위 구성 요소에서 하위 구성 요소로, 하위 구성 요소에서 상위 구성 요소로, 서비스 전달의 세 가지 상호 작용 방식으로 구분됩니다.

상위 구성 요소는 하위 구성 요소에 전달됩니다.

하위 구성 요소는 @Input 데코레이터를 통해 입력 속성을 정의한 다음 상위 구성 요소는 하위 구성 요소를 참조할 때 이러한 입력 속성을 통해 하위 구성 요소에 데이터를 전달합니다. 하위 구성 요소는 setter 또는 ngOnChanges()를 전달하여 입력 속성 값의 변경 사항을 가로챌 수 있습니다.

먼저 두 개의 구성 요소, 즉 하위 구성 요소 DemoChildComponent와 상위 구성 요소 DemoParentComponent를 정의합니다.

하위 구성 요소:

@Component({
 selector: 'demo-child',
 template: `
 <p>{{paramOne}}</p>
 <p>{{paramTwo}}</p>
 `
})
export class DemoChildComponent {
 @Input() paramOne: any; // 输入属性1
 @Input() paramTwo: any; // 输入属性2
}

하위 구성 요소는 @Input()을 통해 입력 속성 paramOne 및 paramTwo를 정의합니다(속성 값은 다음과 같을 수 있음). 모든 데이터 유형)

상위 구성 요소:

@Component({
 selector: 'demo-parent',
 template: `
 <demo-child [paramOne]=&#39;paramOneVal&#39; [paramTwo]=&#39;paramTwoVal&#39;></demo-child>
 `
})
export class DemoParentComponent {
 paramOneVal: any = '传递给paramOne的数据';
 paramTwoVal: any = '传递给paramTwo的数据';
}

상위 구성 요소는 템플릿의 선택기 데모-child를 통해 하위 구성 요소 DemoChildComponent를 참조하고, 두 가지 입력 속성 paramOne 및 paramTwo를 통해 하위 구성 요소에 데이터를 전달합니다. 하위 구성 요소, 그리고 마지막으로 하위 구성 요소의 템플릿에 두 줄의 텍스트, 즉 paramOne에 전달된 데이터와 paramTwo에 전달된 데이터를 표시합니다.

setter를 통한 입력 속성 값 변경 차단

실제 응용에서는 입력 속성 값이 변경되면 해당 연산을 수행해야 하는 경우가 많기 때문에 이때 입력의 setter를 사용해야 합니다. 입력 속성 값의 변경을 차단합니다.

하위 컴포넌트인 DemoChildComponent를 다음과 같이 변형했습니다.

@Component({
 selector: 'demo-child',
 template: `
 <p>{{paramOneVal}}</p>
 <p>{{paramTwo}}</p>
 `
})
export class DemoChildComponent {
 private paramOneVal: any;
 
 @Input() 
 set paramOne (val: any) { // 输入属性1
  this.paramOneVal = val;
  // dosomething
 };
 get paramOne () {
  return this.paramOneVal;
 };
 
 @Input() paramTwo: any; // 输入属性2
}

위 코드에서 가로챈 값 val이 paramOne 속성의 setter를 통해 내부 전용 속성인 paramOneVal에 할당되어 상위 컴포넌트가 통과하는 것을 볼 수 있습니다. 하위 구성 요소 효과에 대한 데이터입니다. 물론 가장 중요한 것은 setter에서 더 많은 다른 작업을 수행할 수 있어 프로그램이 더욱 유연해진다는 것입니다.

ngOnChanges()를 사용하여 입력 속성 값의 변경 사항을 가로채기

setter를 통해 입력 속성 값의 변경 사항을 가로채는 방법은 단일 속성 값의 변경 사항만 모니터링할 수 있습니다. 여러 개의 대화형 입력 속성을 모니터링해야 하는 경우입니다. 때로는 이 방법이 효과가 없을 때도 있습니다. OnChanges lifecyclehook 인터페이스(@Input 데코레이터를 통해 구성 요소에 의해 명시적으로 지정된 변수의 값이 변경될 때 호출됨)의 ngOnChanges() 메서드를 사용하면 여러 입력 속성 값의 변경 사항을 모니터링할 수 있습니다. 동시.

하위 구성 요소 DemoChildComponent에 ngOnChanges를 추가하세요.

@Component({
 selector: 'demo-child',
 template: `
 <p>{{paramOneVal}}</p>
 <p>{{paramTwo}}</p>
 `
})
export class DemoChildComponent implements OnChanges {
 private paramOneVal: any;
 
 @Input() 
 set paramOne (val: any) { // 输入属性1
  this.paramOneVal = val;
  // dosomething
 };
 get paramOne () {
  return this.paramOneVal;
 };
 
 @Input() paramTwo: any; // 输入属性2
 
 ngOnChanges(changes: {[propKey: string]: SimpleChange}) {
  for (let propName in changes) { // 遍历changes
   let changedProp = changes[propName]; // propName是输入属性的变量名称
   let to = JSON.stringify(changedProp.currentValue); // 获取输入属性当前值
   if (changedProp.isFirstChange()) { // 判断输入属性是否首次变化
    console.log(`Initial value of ${propName} set to ${to}`);
   } else {
    let from = JSON.stringify(changedProp.previousValue); // 获取输入属性先前值
    console.log(`${propName} changed from ${from} to ${to}`);
   }
  }
 }
}

새 ngOnChanges 메서드에서 수신한 매개변수 변경 사항은 입력 속성 이름이 키이고 값이 SimpleChange인 개체입니다. SimpleChange 개체에는 현재 입력 속성이 변경되는지 여부가 포함됩니다. 처음 및 이전 값, 현재 값 및 기타 속성. 따라서 ngOnChanges 메소드에서는 여러 입력 속성 값을 모니터링하고 변경 객체를 순회하여 해당 작업을 수행할 수 있습니다.

상위 구성 요소 인스턴스 가져오기

이전 소개에서는 하위 구성 요소가 @Input 데코레이터를 통해 입력 속성을 정의하므로 상위 구성 요소가 입력 속성을 통해 하위 구성 요소에 데이터를 전달할 수 있다는 것이었습니다.

물론 상위 구성 요소 인스턴스를 얻은 다음 상위 구성 요소의 속성이나 메서드를 호출하여 필요한 데이터를 얻는 보다 적극적인 방법을 생각할 수 있습니다. 각 컴포넌트 인스턴스가 인젝터의 컨테이너에 추가된다는 점을 고려하면 Dependency Insertion을 통해 상위 컴포넌트 인스턴스를 찾을 수 있습니다.

부모 구성 요소가 자식 구성 요소 인스턴스(템플릿 변수 @ViewChild 또는 @ViewChildren을 통해 직접 얻음)를 얻는 것보다 자식 구성 요소가 부모 구성 요소 인스턴스를 얻는 것이 더 번거롭습니다.

하위 구성 요소에서 상위 구성 요소의 인스턴스를 가져오려면 두 가지 상황이 있습니다.

상위 구성 요소의 유형이 알려져 있습니다

이 경우 DemoParentComponent를 constructor 상위 구성 요소 참조, 코드 예는 다음과 같습니다.

@Component({
 selector: 'demo-child',
 template: `
 <p>{{paramOne}}</p>
 <p>{{paramTwo}}</p>
 `
})
export class DemoChildComponent {
 paramOne: any;
 paramTwo: any;
 constructor(public demoParent: DemoParentComponent) {
  // 通过父组件实例demoParent获取数据
  this.paramOne = demoParent.paramOneVal;
  this.paramTwo = demoParent.paramTwoVal;
 }
}

알 수 없는 상위 구성 요소 유형

구성 요소는 여러 구성 요소의 하위 구성 요소일 수 있습니다. 때로는 상위 구성 요소의 유형을 직접 알 수 없습니다. Angular에서는 클래스 인터페이스(Class-Interface) 메서드를 사용할 수 있습니다. 즉, 클래스 인터페이스 식별자와 동일한 이름을 가진 별칭을 제공하여 상위 구성 요소가 검색을 지원하도록 할 수 있습니다.

首先创建DemoParent抽象类，它只声明了paramOneVal和paramTwoVal属性，没有实现（赋值），示例代码如下：

export abstract class DemoParent {
 paramOneVal: any;
 paramTwoVal: any;
}

然后在父组件DemoParentComponent的providers元数据中定义一个别名 Provider，用 useExisting 来注入父组件DemoParentComponent的实例，代码示例如下：

@Component({
 selector: 'demo-parent',
 template: `
 <demo-child [paramOne]=&#39;paramOneVal&#39; [paramTwo]=&#39;paramTwoVal&#39;></demo-child>
 `,
 providers: [{provider: DemoParent, useExisting: DemoParentComponent}]
})
export class DemoParentComponent implements DemoParent {
 paramOneVal: any = '传递给paramOne的数据';
 paramTwoVal: any = '传递给paramTwo的数据';
}

然后在子组件中就可通过DemoParent这个标识找到父组件的示例了，示例代码如下：

@Component({
 selector: 'demo-child',
 template: `
 <p>{{paramOne}}</p>
 <p>{{paramTwo}}</p>
 `
})
export class DemoChildComponent {
 paramOne: any;
 paramTwo: any;
 constructor(public demoParent: DemoParent) {
  // 通过父组件实例demoParent获取数据
  this.paramOne = demoParent.paramOneVal;
  this.paramTwo = demoParent.paramTwoVal;
 }
}

子组件向父组件传递

依然先定义两个组件，分别为子组件DemoChildComponent和父组件DemoParentComponent.

子组件：

@Component({
 selector: 'demo-child',
 template: `
 <p>子组件DemoChildComponent</p>
 `
})
export class DemoChildComponent implements OnInit {
 readyInfo: string = '子组件DemoChildComponent初始化完成！';
 @Output() ready: EventEmitter = new EventEmitter<any>(); // 输出属性
 
 ngOnInit() {
  this.ready.emit(this.readyInfo);
 }
}

父组件：

@Component({
 selector: 'demo-parent',
 template: `
 <demo-child (ready)="onReady($event)" #demoChild></demo-child>
 <p>
  <!-- 通过本地变量获取readyInfo属性，显示：子组件DemoChildComponent初始化完成！ -->
  readyInfo: {{demoChild.readyInfo}}
 </p>
 <p>
  <!-- 通过组件类获取子组件示例，然后获取readyInfo属性，显示：子组件DemoChildComponent初始化完成！ -->
  readyInfo: {{demoChildComponent.readyInfo}}
 </p>
 `
})
export class DemoParentComponent implements AfterViewInit {
 // @ViewChild('demoChild') demoChildComponent: DemoChildComponent; // 通过模板别名获取
 @ViewChild(DemoChildComponent) demoChildComponent: DemoChildComponent; // 通过组件类型获取
 
 ngAfterViewInit() {
  console.log(this.demoChildComponent.readyInfo); // 打印结果：子组件DemoChildComponent初始化完成！
 }
 onReady(evt: any) {
  console.log(evt); // 打印结果：子组件DemoChildComponent初始化完成！
 }
}

父组件监听子组件的事件

子组件暴露一个 EventEmitter 属性，当事件发生时，子组件利用该属性 emits(向上弹射)事件。父组件绑定到这个事件属性，并在事件发生时作出回应。

在上面定义好的子组件和父组件，我们可以看到：

子组件通过@Output()定义输出属性ready，然后在ngOnInit中利用ready属性的 emits(向上弹射)事件。

父组件在其模板中通过选择器demo-child引用子组件DemoChildComponent，并绑定了一个事件处理器(onReady())，用来响应子组件的事件($event)并打印出数据（onReady($event)中的$event是固定写法，框架(Angular)把事件参数(用 $event 表示)传给事件处理方法）。

父组件与子组件通过本地变量（模板变量）互动

父组件不能使用数据绑定来读取子组件的属性或调用子组件的方法。但可以在父组件模板里，新建一个本地变量来代表子组件，然后利用这个变量来读取子组件的属性和调用子组件的方法。

在上面定义好的子组件和父组件，我们可以看到：

父组件在模板demo-child标签上定义了一个demoChild本地变量，然后在模板中获取子组件的属性：

<p>
 <!-- 获取子组件的属性readyInfo，显示：子组件DemoChildComponent初始化完成！ -->
 readyInfo: {{demoChild.readyInfo}}
</p>

父组件调用@ViewChild()

本地变量方法是个简单便利的方法。但是它也有局限性，因为父组件-子组件的连接必须全部在父组件的模板中进行。父组件本身的代码对子组件没有访问权。

如果父组件的类需要读取子组件的属性值或调用子组件的方法，就不能使用本地变量方法。

当父组件类需要这种访问时，可以把子组件作为 ViewChild，注入到父组件里面。

在上面定义好的子组件和父组件，我们可以看到：

父组件在组件类中通过@ViewChild()获取到子组件的实例，然后就可以在模板或者组件类中通过该实例获取子组件的属性：

<p>
 <!-- 通过组件类获取子组件示例，然后获取readyInfo属性，显示：子组件DemoChildComponent初始化完成！ -->
 readyInfo: {{demoChildComponent.readyInfo}}
</p>

ngAfterViewInit() {
 console.log(this.demoChildComponent.readyInfo); // 打印结果：子组件DemoChildComponent初始化完成！
}

通过服务传递

Angular的服务可以在模块注入或者组件注入（均通过providers注入）。

在模块中注入的服务在整个Angular应用都可以访问（除惰性加载的模块）。

在组件中注入的服务就只能该组件和其子组件进行访问，这个组件子树之外的组件将无法访问该服务或者与它们通讯。

下面的示例就以在组件中注入的服务来进行父子组件之间的数据传递：

通讯的服务：

@Injectable()
export class CallService {
 info: string = '我是CallService的info';
}

父组件：

@Component({
 selector: 'demo-parent',
 template: `
 <demo-child></demo-child>
 <button (click)="changeInfo()">父组件改变info</button>
 <p>
  <!-- 显示：我是CallService的info -->
  {{callService.info}}
 </p>
 `,
 providers: [CallService]
})
export class DemoParentComponent {
 constructor(public callService: CallService) {
  console.log(callService.info); // 打印结果：我是CallService的info
 }
 
 changeInfo() {
  this.callService.info = '我是被父组件改变的CallService的info';
 }
}

子组件：

@Component({
 selector: 'demo-child',
 template: `
 <button (click)="changeInfo()">子组件改变info</button>
 `
})
export class DemoChildComponent {
 constructor(public callService: CallService) {
  console.log(callService.info); // 打印结果：我是CallService的info
 }
 
 changeInfo() {
  this.callService.info = '我是被子组件改变的CallService的info';
 }
}

上面的代码中，我们定义了一个CallService服务，在其内定义了info属性，后面将分别在父子组件通过修改这个属性的值达到父子组件互相传递数据的目的。

然后通过DemoParentComponent的providers元数据数组提供CallService服务的实例，并通过构造函数分别注入到父子组件中。

此时，通过父组件改变info按钮或子组件改变info按钮在父组件或子组件中改变CallService服务的info属性值，然后在页面可看到改变之后对应的info属性值。

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

Vue에서 v-show 판단 표현을 구현하는 방법

iview 사용자 정의 검증 키워드 입력 상자 사용에 대한 자세한 설명

위 내용은 Angular 구성 요소의 대화형 사용에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!