Angular 개발 실습(4): 컴포넌트 간 상호작용

Angular 애플리케이션 개발에서는 구성 요소가 어디에나 있다고 할 수 있습니다. 이 문서에서는 둘 이상의 구성 요소 간의 상호 작용 방법인 몇 가지 일반적인 구성 요소 통신 시나리오를 소개합니다.

데이터 전송 방향에 따라 상위 컴포넌트에서 하위 컴포넌트로 전달, 하위 컴포넌트에서 상위 컴포넌트로 전달, 서비스를 통해 전달의 세 가지 상호작용 방식으로 구분됩니다.

상위 구성 요소는 @Input 데코레이터를 통해

하위 구성 요소를 전달하여 입력 속성을 정의한 다음, 상위 구성 요소는 하위 구성 요소를 참조할 때 이러한 입력 속성을 통해 하위 구성 요소에 데이터를 전달합니다. setter 또는 ngOnChanges()를 전달하여 입력 속성 값의 변경 사항을 차단합니다. 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 = &#39;传递给paramOne的数据&#39;;
    paramTwoVal: any = &#39;传递给paramTwo的数据&#39;;
}

父组件在其模板中通过选择器demo-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
}

在上面的代码中，我们可以看到通过paramOne属性的 setter 将拦截到的值val赋值给内部私有属性paramOneVal，达到父组件传递数据给子组件的效果。当然，最重要的是，在 setter 里面你可以做更多的其它操作，程序的灵活性就更强了。

通过ngOnChanges()来截听输入属性值的变化

通过 setter 截听输入属性值的变化的方法只能对单个属性值变化进行监视，如果需要监视多个、交互式输入属性的时候，这种方法就显得力不从心了。而通过使用 OnChanges 生命周期钩子接口的 ngOnChanges() 方法（当组件通过@Input装饰器显式指定的那些变量的值变化时调用）就可以实现同时监视多个输入属性值的变化。

在子组件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方法接收的参数changes是以输入属性名称为键、值为SimpleChange的对象，SimpleChange对象含有当前输入属性是否第一次变化、先前值、当前值等属性。因此在ngOnChanges方法中通过遍历changes对象可监视多个输入属性值并进行相应的操作。

获取父组件实例

前面介绍的都是子组件通过@Input装饰器定义输入属性，这样父组件可通过输入属性将数据传递给子组件。

当然，我们可以想到一种更主动的方法，那就是获取到父组件实例，然后调用父组件的某个属性或方法来获取需要的数据。考虑到每个组件的实例都会添加到注入器的容器里，因此可通过依赖注入来找到父组件的示例。

子组件获取父组件实例相比于父组件获取子组件实例（直接通过模板变量、@ViewChild或@ViewChildren获取）要麻烦一些。

要在子组件中获取父组件的实例，有两种情况：

• 已知父组件的类型

  这种情况可以直接通过在构造函数中注入DemoParentComponent来获取已知类型的父组件引用，代码示例如下：

  @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

  먼저 두 개의 구성 요소, 즉 하위 구성 요소 DemoChildComponent와 상위 구성 요소 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 = &#39;传递给paramOne的数据&#39;;
      paramTwoVal: any = &#39;传递给paramTwo的数据&#39;;
  }

  🎜하위 구성 요소는 @Input( ) 입력 속성 paramOne 및 paramTwo를 정의합니다(속성 값은 모든 데이터 유형일 수 있음) 🎜🎜상위 구성 요소: 🎜

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

  🎜상위 구성 요소가 선택기를 전달합니다. 템플릿에서 demo-child는 하위 구성 요소 DemoChildComponent를 참조하고 하위 구성 요소 paramOne 및 paramTwo<의 두 입력 속성을 전달합니다. /code>를 하위 구성 요소에 전달합니다. 구성 요소는 데이터를 전달하고, 마지막으로 <code>ParamOne에 전달된 데이터 및 paramTwo에 전달된 데이터라는 두 줄의 텍스트가 하위 구성 요소의 템플릿에 표시됩니다. 🎜

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

  🎜실제 응용에서는 입력 속성 값이 변경되면 해당 연산을 수행해야 하는 경우가 많기 때문에 이때 입력 속성을 사용해야 합니다. 입력 속성 값의 변경을 가로채는 속성 설정자입니다. 🎜🎜하위 구성 요소 DemoChildComponent를 다음과 같이 변환합니다. 🎜

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

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

  ngOnChanges()를 사용하여 입력 속성 값의 변경 사항 차단

  🎜setter를 사용하여 입력 속성 값의 변경 사항 차단은 단일 속성 값의 변경 사항만 모니터링할 수 있습니다. 대화형 입력 속성을 모니터링해야 하면 이 접근 방식은 효과적이지 않습니다. OnChanges 수명 주기 후크 인터페이스의 ngOnChanges() 메서드(@Input 데코레이터를 통해 구성 요소에 의해 명시적으로 지정된 변수의 값이 변경될 때 호출됨)를 사용하면 여러 입력 속성 값을 모니터링할 수 있습니다. ​​동시에 변화합니다. 🎜🎜DemoChildComponent에 ngOnChanges 추가: 🎜

  @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(&#39;demoChild&#39;) demoChildComponent: DemoChildComponent; // 通过模板别名获取
      @ViewChild(DemoChildComponent) demoChildComponent: DemoChildComponent; // 通过组件类型获取
      
      ngAfterViewInit() {
          console.log(this.demoChildComponent.readyInfo); // 打印结果：子组件DemoChildComponent初始化完成！
      }
  
      onReady(evt: any) {
          console.log(evt); // 打印结果：子组件DemoChildComponent初始化完成！
      }
  }

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

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

  🎜이전 소개에서는 하위 구성 요소가 @Input 데코레이터를 통해 입력 속성을 정의하므로 상위 구성 요소가 하위 구성 요소에 데이터를 전달할 수 있다는 것이었습니다. 입력 속성을 통한 구성 요소. 🎜🎜물론 상위 구성 요소 인스턴스를 얻은 다음 상위 구성 요소의 속성이나 메서드를 호출하여 필요한 데이터를 얻는 보다 적극적인 방법을 생각할 수 있습니다. 🎜각 구성 요소 인스턴스가 인젝터의 컨테이너에 추가된다는 점을 고려하면 종속성 주입을 통해 상위 구성 요소 인스턴스를 찾을 수 있습니다🎜. 🎜🎜하위 구성 요소는 상위 구성 요소 인스턴스를 가져옵니다와 상위 구성 요소는 하위 구성 요소 인스턴스를 가져옵니다(템플릿 변수, @ViewChild</code를 통해 직접). code> 또는 <code>@ViewChildren을 사용하여)를 얻는 것이 좀 더 번거롭습니다. 🎜🎜하위 구성 요소에서 상위 구성 요소의 인스턴스를 가져오려면 다음 두 가지 상황이 있습니다. 🎜
  • 🎜상위 구성 요소의 유형이 알려져 있습니다🎜🎜이 경우 , Inject DemoParentComponent를 생성자에 직접 전달하여 알려진 유형의 상위 구성 요소 참조를 얻을 수 있습니다. 코드 예는 다음과 같습니다. 🎜

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

  • 🎜알 수 없는 상위 구성 요소의 유형🎜🎜A 구성 요소 여러 구성 요소의 하위 구성 요소일 수 있으며 때로는 상위 구성 요소의 유형을 직접 알 수 없는 경우 Angular에서는 Class-Interface(Class-Interface)를 통해 찾을 수 있습니다. 상위 구성 요소는 Class-Interface가 포함된 링크를 제공합니다. >검색을 돕기 위해 동일한 이름을 가진 별칭을 식별합니다. 🎜🎜먼저 구현(할당) 없이 paramOneVal 및 paramTwoVal 속성만 선언하는 DemoParent 추상 클래스를 만듭니다. 🎜

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

    🎜그런 다음 parent DemoParentComponent 구성 요소의 providers 메타데이터에 별칭 Provider를 정의하고 useExisting을 사용하여 상위 구성 요소 DemoParentComponent의 인스턴스를 삽입합니다. 코드 예제는 다음과 같습니다. 🎜 그런 다음 하위 구성 요소에 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 = &#39;子组件DemoChildComponent初始化完成！&#39;;
      @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(&#39;demoChild&#39;) 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 = &#39;我是被父组件改变的CallService的info&#39;;
      }
  }

  子组件：

  @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 = &#39;我是被子组件改变的CallService的info&#39;;
      }
  }

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

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

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

  相关推荐：

  Angular开发实践（三）：剖析Angular Component

  Angular开发实践（二）：HRM运行机制

  위 내용은 Angular 개발 실습(4): 컴포넌트 간 상호작용의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!